Rusça Html5 özellikleri. HTML5 Kodlama Standartları. Boş Satırlar Ve ...

Bir web sayfasında veya web uygulamasında kullanılan bir HTML5 öğesinin veya niteliğinin açıklamasını hızlı bir şekilde bulmak mı istiyorsunuz? İşte web tasarımcılarının ve web geliştiricilerinin 15 yılı aşkın süredir el altında tutmaya çalıştığı klasik bir referans kitabı. Kitabın beşinci baskısı, HTML5 Aday Tavsiyesi, HTML5.1 Çalışma Taslağı ve WHATWG standartlarına uygun olarak HTML5 öğelerinin ve niteliklerinin tam bir tanımını içerir. Dizinin özellikleri: – HTML5, HTML5.1 ve WHATWG standardındaki öğelerin ve niteliklerin alfabetik olarak sıralanmış bir listesi; – her öğe için işaretleme, içerik kategorileri, içerik modelleri ve başlangıç/bitiş etiketi gereksinimlerine ilişkin örnekler; – HTML5 ve HTML4.01 özellikleri arasındaki farkların açıklaması; – özel karakterlerden oluşan tablolar; – HTML5'te kullanılan API kitaplıklarına genel bakış.

İster deneyimli bir web sitesi geliştiricisi olun, ister en son standartlarda hızlı bir şekilde bir web sitesi oluşturmak isteyin, bu yararlı kitabı vazgeçilmez bulacaksınız.

Makaleyi veya kitabı beğendiniz mi? Arkadaşlarınla ​​paylaş:

Sitede sunulan tüm kitaplar yalnızca bilgilendirme amaçlıdır. Bunların sizin tarafınızdan herhangi bir şekilde kullanılmasına yalnızca bilgilendirme amaçlı izin verilmektedir. Gelecekte kullanmayı planlıyorsanız telif hakkı sahiplerinden satın almanız gerekir. Site yönetimi bunları kullanmanızdan sorumlu değildir.

Yayının başlığını okuduktan sonra: “Rusça HTML5 Hile Sayfası” - herkes konuşmayı zaten tahmin etmişti, ancak önce genel olarak HTML5 hakkında birkaç paragraf.

HTML5'in oluşturulmasına yönelik çalışmalar 2004 yılında başladı. ve bu güne kadar devam ediyoruz. HTML5, HTML'nin (HyperText Markup Language) en evrensel ve işlevsel sürümü olarak planlanmıştır, çünkü şu veya bu şekilde Apple, Mozilla, Opera, Microsoft ve Google gibi endüstri devleri HTML5'in oluşturulmasına dahil olmaktadır. Tam olarak şunu not edeyim Google Chrome, Açık şu an, çoğu HTML5 öğesini destekler

HTML5'te değişiklikler yapılabileceği gerçeğine rağmen, HTML 5 spesifikasyonu üzerindeki çalışmalar hala devam ettiğinden ve devam etmekte olduğundan, teknoloji gelişimi o kadar hızlı gerçekleşiyor ki, HTML5 yakında benimsenecek ve web sitelerinin geniş yetenekler kullanılarak oluşturulması gerekecek. HTML5'in!

Rusça HTML5 hile sayfası öğrenmeye yardımcı olacak

Kodlayıcıların ve düzen tasarımcılarının bugün HTML5'in yeniliklerini, etiketlerini ve standartlarını öğrenmeleri gerekiyor, çünkü HTML5 üzerinde devam eden çalışmalara rağmen, web siteleri oluştururken HTML5'in bazı yetenekleri zaten oldukça başarılı bir şekilde kullanılıyor. Doğal olarak HTML5'i etiketlerle öğrenmeye başlamanız gerekiyor çünkü HTML5'te yeni etiketler ortaya çıktı ve bazı eski etiketler desteklenmeyecek. Ayrıca HTML4'ten birçok etiket HTML5'e geldi. Ve bir şeyi öğrenmede kopya kağıdından daha iyi ve daha kullanışlı ne olabilir? Tanışmak:

RuNet'teki Rusça ilk HTML5 kopya sayfası

RuNet'teki Rusça'daki ilk HTML5 kopya sayfası, daha önce yaygın olarak kullanılan ancak stillerin adlarında yazılan yeni HTML5 öğelerini içerir. Örneğin altbilgi, başlık, bölüm, makale ve diğerleri. Ek olarak, Rusça HTML5 hile sayfası tüm etiketleri içerir eski versiyon HTML5'e taşınan HTML4. Ayrıca, Rusça'daki HTML5 kopya sayfası, HTML5 tarafından desteklenmeyen etiketler içerir.

A4 formatında hazırlanmış, Rusça HTML5 kopya sayfası

RuNet'te Rusça'daki ilk HTML5 kopya sayfası A4 formatında yapılmıştır, bu nedenle yazdırıp elinizin altında tutmanız sizin için uygun olacaktır. Rusça HTML5 hile sayfasının tüm etiketleri tek satırda tanımladığını ve etiketin amacını mümkün olduğunca aktardığını unutmayın. Etiketler kaldırıldıkça veya HTML5'e eklendikçe, Rusça HTML5 kopya sayfamız sürekli olarak geliştirilecek ve güncellenecektir. Aşağıdaki bağlantıdan “HTML5 hile sayfasını Rusça” olarak indirebilirsiniz. Arşivde 1 pdf bulacaksınız Yüksek kalite ve iki jpg dosyası farklı uzantılarda.

“HTML5 Hile Sayfasını Rusça” olarak indirin (İndirme sayısı: 7996)

Arşiv, 1024×1448 ve 2480×3508 uzantılarında iki jpg dosyası içeriyor

güncellenme tarihi: 29.10.2014

Gönderinin yazılmasının ve HTML 5'te kopya sayfasının fiilen oluşturulmasının üzerinden iki yıldan fazla zaman geçti. Bu süre zarfında kopya sayfası 3600 kez indirildi), çok memnun oldum, umarım çalışanlar için faydalı olmuştur. HTML 5'teki düzen. Çeşitli forumlardan ve web sitelerinden çok şey öğrendim ve bir kopya sayfası oluşturarak minnettarlığımı göstermek, borcumu ödemek istedim). Bugün bu yazıya neden bir güncelleme yazıyorum çünkü bugün HTML5'in gelişimi nihayet tamamlandı!

HTML5 geliştirmesi resmi olarak tamamlandı

HTML5 resmi olarak "işlevsel olarak tamamlandı". Worldwide Web Consortium'un (W3C) belirlediği küresel standartlara uygundur. Hala yapılması gereken bazı testler var ve henüz resmi bir Web standardı haline gelmedi ancak şimdilik mevcut sürüme kıyasla yeni bir özelliğin olmayacağını söylemek yanlış olmaz.

Bu, web tasarımcılarının ve uygulama geliştiricilerinin artık sorunsuz bir geçiş için "kararlı bir hedefe" sahip olduğu anlamına geliyor. yeni standart 2015'e kadar. HTML5 işaretleme dili, geliştiricilerin daha önce bağımsız uygulamalar veya ek uygulamalar gerektiren sayfalara işlevsellik eklemesine olanak tanır. yazılım Java gibi, Adobe Flash veya Microsoft (MSFT, Fortune 500) Silverlight. Destekler video akışı ve diğer özelliklerin yanı sıra coğrafi konum hizmetleri, çevrimdışı araçlar ve dokunmatik kontroller.

Yeni bir standardın geliştirilmesi 10 yıldan fazla sürdü. CEO W3C Jeff Jaffe, birkaç gün önce hazırladığı bir açıklamada, bugün itibariyle geliştiricilerin önümüzdeki yıllarda HTML5'e güvenebileceklerini bildiklerini söyledi. "Ayrıca geliştiriciler akıllı telefonlara, arabalara, TV'lere ulaşmak için hangi becerileri geliştirmeleri gerektiğini bilecekler. e-kitaplar, dijital tabelalar ve cihazlar henüz bilinmiyor” diye ekledi.

En sonuncu Microsoft sürümleri İnternet Explorer, Google Chrome, Mozilla Firefox ve Apple Safari çoğu HTML5 öğesiyle zaten uyumludur. W3C halihazırda ilk bölümleri taslak olarak sunulan HTML 5.1 üzerinde çalışıyor.

Kurallar HTML kodu

Birçok web geliştiricisi için HTML kodu özellikleri yeterince anlaşılmamıştır.

2000-2010'da birçok web geliştiricisi HTML'den XHTML'ye geçiş yaptı.

XHTML kullanan geliştiriciler yavaş yavaş iyi HTML yazma özellikleri geliştiriyorlar.

Ve HTML5'te nispeten iyi kod standartları oluşturmamız gerekiyor; spesifikasyonun altında birkaç yönerge verilmiştir.

Doğru belge türünü kullanın

İlk satırda belge türü bildirimi HTML belgesi:

DOKTİP HTML>

Küçük harf gibi başka etiketler kullanmak istiyorsanız aşağıdaki kodu kullanabilirsiniz:

DOKTİP HTML>

Küçük harfli öğe adları

HTML5 öğe adı büyük veya küçük harflerle kullanılabilir.

• Karışık stil durumu çok kötü.
• Küçük harflerin yazılması kolaydır.

Bu bir paragraf.

Çok kötü:

Bu bir paragraf.

Bu bir paragraf.

Tüm HTML öğelerini kapat

HTML5'te tüm öğeleri (öğe gibi) kapatmak istemezsiniz, ancak her öğenin bir kapanış etiketi eklemesini öneririz.

Bu bir paragraf.

Bu bir paragraf.

Bu bir paragraf.

Bu bir paragraf.

Kapalı boş elemanlar HTML

HTML5'te boş HTML öğesinin kapatılmasına gerek yoktur:

Yazabiliriz:

Ayrıca şunu da yazabilirsiniz:

XML, XHTML ve eğik çizgi (/) gereklidir.

XML yazılım sayfanızı kullanmayı planlıyorsanız bu stil çok iyidir.

Küçük harfli özellik adı

HTML5, özellik adını hem büyük hem de küçük harflerle kullanmanıza olanak tanır.

• Kullanım senaryosu çok kötü bir alışkanlıktır.
• Geliştiriciler genellikle küçük harf kullanır (XHTML'ye benzer).
• Küçük harf stili daha ferahlatıcı görünüyor.
• Küçük harflerin yazılması kolaydır.

Mülk değeri

HTML5 özellik değerleri alıntı yapılamaz.

• Özellik değeri boşluk içeriyorsa tırnak kullanmanız gerekir.
• Karışık stil önerilmez, tek stil önerilir.
• Tırnak işaretleri kullanan özellik değerlerinin okunması kolaydır.

Aşağıdaki örnek özellik değeri boşluk içermektedir, tırnak işareti kullanmayın, çalışmayabilir:

Aşağıda kullanılanlar ikili alıntı, bu doğru:

özellikler

Image Alt nitelikleri sıklıkla kullanılır. Görüntü görüntülenemiyorsa, görüntü ekranının yerini alabilir.

= "HTML5" stil = "genişlik: 128 piksel; yükseklik: 128 piksel">

Görüntü boyutu belirlenir, belirtilen değerin yüklenmesi sırasında rezerve edilebilir, titremeyi azaltır.

= stil "HTML5" = "genişlik: 128 piksel; yükseklik: 128 piksel">

Boşluklar ve eşittir işaretleri

Eşittir işaretinden önce ve sonra boşluk kullanabilirsiniz.

Uzun kod satırlarından kaçının

HTML düzenleyiciyi kullanarak kodun sola ve sağa kaydırılması gariptir.

Her kod satırı mümkün olduğunca 80 karakterden az olmalıdır.

Boş satırlar ve girintiler

Sebepsiz yere boş satır eklemeyin.

Her işlevsel mantık bloğu için, onu daha okunaklı hale getirecek şekilde boş bir satır ekleyin.

Kısa kodlar arasında gereksiz boş girintili satırlar kullanmayın.

Ekstra boş satırlar ve girintiler:

Bu eğitim

HTML

Bu eğitim sadece teknolojiyi değil aynı zamanda uykuyu da öğretiyor. Sadece teknolojiyi değil aynı zamanda bir rüyayı da öğreten bu ders kitabı, Bu eğitim sadece teknolojiyi değil aynı zamanda uykuyu da öğretiyor.

Bu eğitim

Bu derste sadece teknolojiyi değil uykuyu da öğretiyoruz. Bu eğitim sadece teknolojiyi değil aynı zamanda uykuyu da öğretiyor. Bu eğitim sadece teknolojiyi değil aynı zamanda uykuyu da öğretiyor. Bu eğitim sadece teknolojiyi değil aynı zamanda uykuyu da öğretiyor.

Örnek form:

İsim Tanım A Açıklama A B Açıklama B

Örnek liste:

Londra

Paris

Tokyo

Hadi atlayalım ve?

HTML5 standardında etiket ihmal edilebilir.

Aşağıdaki belgeler geçerli HTML5'tir:

Örnek:

DOKTİP HTML> Sayfa başlığı

Bu başlık

Bu bir paragraf.

Dene "

öğe, belgenin kök öğesidir ve sayfayı tanımlamak için kullanılan dildir:

DOKTİP HTML>

Ekranlarda ve arama motorlarında okumayı kolaylaştıracak dil bildirimi.

DOM veya XML yazılım çökmelerini göz ardı edelim.

Eski tarayıcılarda (IE9) oluşan hatayı atlayalım.

Bunu ihmal mi edelim?

HTML5 standardında etiket ihmal edilebilir.

Öğe varsayılana eklenmeden önce tarayıcı, içeriği varsayılan olarak ayarlar.

örnekler

DOKTİP HTML> Sayfa başlığı

Bu başlık

Bu bir paragraf.

» Meta Verileri deneyin

HTML5, başlık başlığı sayfanın temasını açıklayan bir öğe gerektirir:

Bu eğitimde

Arama motorunun sayfanızın konusunu hızlı bir şekilde anlamasını sağlayan başlık ve dil:

DOKTİP HTML> Bu eğitimde

Web tasarımcısı - HTML5 Spesifikasyonu (HTML 5)

HTML5'teki etiketler, bir bilgisayar programının (arama robotu vb.) sayfanın ana içeriğini sayfanın geri kalanından (formülasyon ve gezinme öğeleri) ayırt edebilmesi için tasarlanmış, bir web sayfasının yapısını tanımlayan XML-HTML etiketleridir. : üst, alt, menü, sayfa yan öğeleri, tekrarlanan (dinamik) bloklar vb. Ana içerik (sayfa metni) düzeyinde de bir bölümleme vardır. HTML5 dilinin kendisi HTML, XML, CSS vb. için bir eklentidir.

Sayfa başlığı Web sayfasının üstü, "başlık" Web sayfasının ana menüsü Ana gövde, makale, sayfa malzemesi Kenar çubuğu (kenar çubuğu) Sayfanın alt kısmı, alt bilgi

Web sitesi yapısı

- sayfanın ana içeriğini (makale) çerçeveleyin, - sayfa başlığını çerçeveleyin, - sayfanın altbilgisini çerçeveleyin, - ana şeyi çerçeveleyin sayfa menüsü, - sayfanın kenar çubuğunu çerçeveleyin (kenar çubuğu), - sayfadaki çerçeve yinelenen bloklar (örneğin yorumlar).

HTML5 web sayfası şablonu kod öğeleri.

- Windows-1251 kodlamasını atayın.

- sayfa IE'de açılırsa tarayıcı her zaman en son standart görüntüleme modunu kullanmalıdır.

- sitenin mobil cihazlarda görüntülenmesi.

başlık - site sayfasının başlığı, genellikle site logosunu, başlığı, telefon numarasını, kaydırıcıyı vb. içerir.

nav - site sayfasının ana menüsü.

makale - sayfanın ana içeriği: makale, blog yazısı, forum konusu vb. Metin, resim, video, tablo vb. içerebilir.

bir kenara - sitenin kenar çubuğu (kenar çubuğu), genellikle şunları içerir çeşitli unsurlar, örneğin: kategoriler, etiketler, en son gönderiler/yorumlar, ek menüler, sayaçlar vb.

altbilgi - alt kısım - bir web sitesi sayfasının altbilgisi, genellikle şunları içerir çeşitli bilgiler(telif hakları), iletişim bilgileri(adresler, telefon numaraları) vb.

Sayfa yapısı düzeyinde HTML5

Sayfa yapısını bölmekten sorumlu yeni HTML5 etiketlerinin listesine bakalım:

- "sayfa başlığı" olarak adlandırılan, sitenin üst kısmının tasarım öğelerini çerçeveleyen etiketler. Ayrıca başlık etiketleri şu şekilde de kullanılabilir: Üst kısmı bölüm etiketi.

- sitedeki ana menüyü çerçeveleyen etiketler.

- sayfanın ana içeriğini çerçeveleyen etiketler: makale, blog girişi, haberler, ilk forum girişi vb.

- kenar çubuğunu çerçeveleyen etiketler. Kenar çubuğu, genellikle başlık blokları (kategoriler), etiket bulutları (etiketler), bir liste içeren "kenar çubuğu" olarak adlandırılan bir çubuktur. son Girişler ve benzeri. Ayrıca sayaçları, widget'ları (örneğin, VKontakte'den gelen yorumlar) ve sosyal düğmeleri çerçevelemek için yan etiketleri de kullanabilirsiniz.

- çerçeveleme etiketleri alt kısım Site, yazarın (şirketin) adını, kişileri (adresler, telefon numaraları), yasal bilgileri (telif hakları) vb. içerebilen "sayfa altbilgisi" olarak adlandırılır. Alt bilgi etiketleri aynı zamanda bölüm etiketinin alt kısmı olarak da kullanılabilir; altbilgi etiketlerinin kendisi bölüm etiketlerinin arasında yer alacaktır

- bir sayfanın veya ana içeriğin tekrar eden bölümlerini çerçeveleyen etiketler; örneğin, bir sayfada bir hikayenin birden fazla bölümü varsa, her bölüm bu etiketlerin arasına yerleştirilebilir. Veya kenar çubuğundaki bir bağlantıya tıklarsanız (örneğin, bir kategorinin bağlantısında), bu kategoriye ait makalelere yönlendiren açıklamaları olan bağlantıların olacağı ve açıklamaları olan bağlantıların çerçevelenebileceği bir sayfa görünecektir. bölüm etiketlerinin yanı sıra çevrimiçi mağazadaki açıklamalara sahip ürünler, gönderilerdeki yorumlar, forumlardaki bir konuyla ilgili yorumlar vb.

Metin düzeyinde HTML5

Sayfa metninin anlamsal bölümünden sorumlu yeni HTML5 etiketlerinin listesine bakalım:

- bu etiketler arasında yer alan metin “seçili” hale gelir. İşaretleme etiketlerinin amaçlarından biri, örneğin kullanıcı tarafından arama satırına girilen kelimeyle eşleşen metindeki kelimeleri çerçevelemektir.

- etiketler, şu formatta tarihler ve/veya saatler oluşturmak için tasarlanmıştır Formun ISO'su: YYYY-MM-DDThh:mm:ss , bu format anlaşılabilir bilgisayar programları. Zaman etiketleri bir tarihi veya metni çerçeveleyebilir; etiket metni çerçevelerse, buna değeri ISO biçiminde tarih ve/veya saat olan bir tarihsaat özelliği eklenir.

- Etiketler, gizli veya görüntülenen bilgileri depolamak için tasarlanmıştır (spoiler gibi çalışır).

- etiketler başlığı çerçeveler, üzerine tıklarsanız, detay etiketleri arasında bulunan metin görünecektir (spoiler olarak kullanılabilir).

Ek HTML5 dil etiketleri

Dili zenginleştiren yeni HTML5 etiketlerinin listesi:

- Etiketler, ölçüm sonucunun değişmediği statik bir ölçek göstergesini görüntüleyecek şekilde tasarlanmıştır. Çalışmak için minimum ve maksimum değere ihtiyacınız vardır.

- Etiketler, ölçüm sonucunun gerçek zamanlı olarak değiştiği dinamik bir ölçek göstergesini (örneğin, bir dosya indirme ölçeği) görüntülemek için tasarlanmıştır.

- etiket, JavaScript'te komut dosyaları oluştururken kullanılan menü etiketleri arasında bulunmalıdır.

- komut etiketi bu etiketlerin arasına yerleştirilir.

- etiketler betiğin çalışmasını göstermeyi amaçlamaktadır.

- etiketler, bir metin alanına yazıldığında görüntülenecek bir liste oluşturmayı amaçlamaktadır.

- etiketler, şekil etiketleri arasında bulunan bir nesnenin (örneğin bir görüntünün) açıklamasını çerçeveler.

- etiketler, çeşitli sayfa nesnelerini kendi açıklamalarıyla gruplandırır; örneğin, açıklamalı resimler, açıklamalı ürünler vb.

- etiketler h* başlıklarını gruplamak için tasarlanmıştır

- etiket genel/özel anahtar çiftleri oluşturmak, verileri şifrelemek/şifresini çözmek, dijital imza oluşturmak/doğrulamak için kullanılır.

- etiketler metni ve ona yapılan açıklamaları çerçeveler.

- etiketler ruby ​​​​etiketleri arasında bulunur ve açıklamayı çerçeveleme amaçlıdır.

- etiketler, ruby ​​etiketlerini desteklemeyen tarayıcılar için tasarlanmıştır.

- etiketi tarayıcıya kelimenin nereye yerleştirileceğini söyler (" yumuşak aktarım") bu kelime tarayıcı penceresine sığmıyorsa.

Yeni teknolojileri açıklayan HTML5 etiketleri

HTML5, HTML5 dilinin bir parçası olan ve olmayan birçok teknolojiyi ve API'yi kullanma yeteneğini sunar. üçüncü taraf eklentiler, bunlardan bazıları:

- etiketler, ses dosyalarını kullanmadan oynatmak için tasarlanmıştır üçüncü taraf programları(eklentiler, uzantılar).

- etiketler, üçüncü taraf programların (eklentiler, uzantılar) kullanılmadan video dosyalarını oynatmak için tasarlanmıştır.

- etiket, ses ve video etiketlerinin içinde bulunan ses/video dosyalarının yolunu belirtmeyi amaçlamaktadır.

- etiketler, sitede vektör şekilleri oluşturabileceğiniz ve bunları JavaScript programlama dilini kullanarak değiştirebileceğiniz özel bir alan oluşturmayı amaçlamaktadır. Gelecekte tuval Flash teknolojisinin yerini alacak (evet, teoride...).

Etiket

Etiket, vektör şekillerini çizmek ve değiştirmek için tasarlanmış özel bir öğedir. Etiket, Flash teknolojisinin yerini almak üzere oluşturuldu. Etiketi kullanarak vektör şekilleri (resimler) çizebilir ve JavaScript kullanarak bu şekilleri işleyebilir, böylece sitede animasyon (çizgi film ve hatta oyunlar) oluşturabilirsiniz.

Ses videosu

Etiketini kullanarak ses dosyalarını sayfaya gömebilir ve dinleyebilirsiniz. Öğe

Etiketini kullanarak video dosyalarını sayfaya gömebilir ve görüntüleyebilirsiniz. Öğe ayrıca oynat düğmelerinin bulunduğu bir panel oluşturur.

JavaScript API'si

HTML5 spesifikasyonu nasıl etkileşime girmesi gerektiğini açıklar JavaScript dili, DOM teknolojisi aracılığıyla sayfa öğeleriyle. Ayrıca HTML5'te nesneleri işlemek için yeni yöntemler vardır, örneğin JavaScript kullanarak ve bu yöntemlerle ses/video kontrol panelindeki düğmeleri programlı olarak kontrol edebilirsiniz.

XML teknolojisi desteği

HTML5 dili kullanılarak yazılan bir HTML belgesinde artık SVG veya MathML gibi çeşitli XML formatlarıyla ilişkili teknolojileri uygulamak mümkün.

SVG

SVG - Ölçeklenebilir Vektör Grafikleri vektör grafikleri) bir XML biçimidir. HTML5, XML formatlarını desteklemeye başladığından beri, artık SVG kullanılarak oluşturulan görüntüleri bir HTML belgesine gömmek ve bunları JavaScript aracılığıyla değiştirmek mümkün.

Yeşil daire modelinin örnek kodu:

Sonuç:

MathML

MathML - Matematiksel İşaretleme Dili (matematiksel işaretleme dili) XML formatı. Kullanarak bu formatınÇeşitli matematiksel formülleri tanımlayabilirsiniz.

HTML5'teki hangi etiketler kullanımdan kaldırıldı?

HTML5 spesifikasyonundaki eski etiketler şunlardır:

ve bunun yerine embed etiketi kullanılmalıdır bunun yerine kısaltma etiketi kullanılmalıdır onun yerine kullanılmalı ses etiketi bunun yerine ul etiketi kullanılmalıdır ..bunun yerine kullanılmalı iframe etiketi bunun yerine bir sürü form ve giriş etiketi kullanmalısınız ve bunun yerine ön veya kod etiketleri kullanılmalıdır Bunun yerine pre etiketi kullanılmalıdır bunun yerine s etiketi kullanılmalıdır

Etiketleri biçimlendirmek yerine: , , , , , , , , , ve , CSS özelliklerini kullanmalısınız.

HTML5'te web siteleri oluştururken eski etiketlerin kullanılması önerilmez, ancak bu, tarayıcıların artık bunları desteklemediği anlamına gelmez; örneğin, önerilmeyen bir etiketin çalışması alt çizgi

HTML5'teki yeni global özellikler

Global nitelikler, herhangi bir HTML belge etiketine gömülebilen niteliklerdir. HTML5'te yeni global özellikler ortaya çıktı; aşağıdaki açıklamalarda Yeni kelimesiyle vurgulanıyorlar

Global HTML5 niteliklerinin adlarına ve açıklamalarına bakalım:

erişim anahtarı = " " - önceden programlanmış bir tuşa basarak sayfanın herhangi bir öğesini (etiketini) kullanmanıza olanak tanır tuş kombinasyonu,class = " " - sınıf adını ayarlamanıza olanak tanır, contenteditable = " " - içeriği düzenlemenize olanak tanır öğe Yeni,contextmenu = " " - Yeni öğe için bir içerik menüsü oluşturmanıza olanak tanır, dir = " " - yönetmenize olanak tanır Metin yönü,draggable=" " - kullanıcının Yeni öğeyi sürüklemesine olanak tanır, dropzone = " " - Yeni'yi sürüklerken bir öğeyle ne yapacağınızı belirtmenize olanak tanır, hiden = " " - Yeni öğeyi gizlemenizi sağlar, id = " " - bir öğe için benzersiz bir tanımlayıcı ayarlamanıza olanak tanır, lang = " " - öğe içeriğinde dil kodunu belirtmenize olanak tanır, yazım denetimi = " " - Yeni öğesinin içeriğinde yazım denetiminin yapılıp yapılmayacağını belirtmenize olanak tanır, style = " " - bir öğe için stil oluşturmanıza olanak tanır, tabindex = " " - Sekme tuşuna bastığınızda öğelerin hangi sırayla odaklanması gerektiğini belirten bir kural oluşturmanıza olanak tanır, title = " " - farenizi bir öğenin üzerine getirdiğinizde görünen bir araç ipucu oluşturmanıza olanak tanır.

HTML5 spesifikasyonunda etiketler tam teşekküllü nesnelere dönüştüğünden, global nitelik kavramı, spesifikasyonda henüz açıklanmayan etiketler için bile bu nesnelerin zaten doğasında vardı.

HTML5 belge kodu yapısındaki yenilikler

HTML5'teki kod yapısı bazı değişikliklere uğradı, işte bunlardan bazıları:

1. Farklı önceki sürümler HTML5'te yalnızca bir belge türü vardır: Örneğin bu sitenin sayfalarının kaynak kodunda görebilirsiniz (doktipten önce hiçbir şey olmaması, boşluk olmaması, satır sonu olmaması vb. gerektiğini unutmayın).

2. Belge dilini belirtmek için artık meta etiketi yerine: etikette lang = "ru" niteliğini kullanmanız gerekir:

3. Belge kodlamasını belirtmek için artık meta etiketi yerine: http-equiv ve content nitelikleri olmadan bir meta etiket kullanmanız gerekir

4. Artık etikette bir JavaScript komut dosyası oluştururken type = "text/javascript" ve language = "JavaScript" niteliklerini uygulamaya gerek yoktur.

5. Uygulamanın ardından CSS stilleri Artık ve etiketlerinde type="text/css" niteliğini uygulamaya gerek yok.

6. Bağlantı satır içi bir etikettir; HTML özellikleri ve XHTML'de blok etiketlerini çerçevelemeleri önerilmedi; şimdi HTML5 spesifikasyonunda bağlantılar için bu öneri kaldırılmıştır ve artık bir veya daha fazla blok öğesini çerçevelemelerine izin verilmektedir.

Başlık

Paragraf

Artık HTML5 ile şunu yapabilirsiniz:

Başlık

http://html-5.ru/, http://html-5.ru/uchebnik-html5 sitesindeki materyallere dayanmaktadır.

Arama motoru robotları için komut etiketleri, sayfaların anlamsal yükü

• 2015-2017'den itibaren HTML W3C'ye yapılan eklemeler

• W3C Tavsiyeleri 24 Aralık 1999

Çoğu zaman web geliştiricileri belirli HTML kodlama standartlarının mevcut olduğunun farkında bile değildir. Ancak 2000 ile 2010 yılları arasında birçok web geliştiricisi HTML'den XHTML'ye geçti. Aynı zamanda XHTML, geliştiricileri geçerli ve "iyi biçimlendirilmiş" kod yazmaya zorladı. HTML5, kod doğrulama söz konusu olduğunda bir miktar özensizliğe izin verir.

Ancak stildeki tutarlılık, başkalarının HTML kodunuzu anlamasını kolaylaştıracaktır.

Belki bir gün okuma programları gibi programlar XML verileri, HTML kodunuzu okumanız gerekecek. Bu nedenle, iyi biçimlendirilmiş XHTML benzeri sözdiziminin kullanılması makul bir yaklaşımdır.

Kodunuzun her zaman düzgün, temiz ve iyi biçimlendirilmiş olduğundan emin olun.

Doğru belge türünü kullanın

Belge türünü her zaman ilk satırda bildirin:

Küçük harf etiketleriyle tutarlılığı korumak istiyorsanız aşağıdaki belge türü tanımını kullanabilirsiniz:

Eleman adlarını küçük harflerle yazın

HTML5, öğe adlarında hem büyük hem de küçük harflere izin verir. Ancak her zaman yalnızca küçük harfleri kullanmak daha iyidir. Bu, aşağıdaki hususlarla açıklanmaktadır:

• Etiket adlarında büyük ve küçük harflerin karıştırılması kötü bir uygulama olarak kabul edilir

Bu bir paragraf metnidir.

Çok kötü:

Bu bir paragraf metnidir.

Bu bir paragraf metnidir.

Tüm HTML öğelerini kapat

HTML5'te tüm öğeleri kapatmanız gerekmez (örneğin, öğe

Bu bir paragraf metnidir.

Bu bir paragraf metnidir.

Bu bir paragraf metnidir.

Bu bir paragraf metnidir.

Boş HTML öğelerini kapat

HTML5'te boş elemanların kapatılıp kapatılmaması web geliştiricisinin isteğine bağlıdır.

Kabul edilebilir:

Ayrıca kabul edilebilir:

Ancak XHTML ve XML'de sondaki eğik çizgi (/) ZORUNLUDUR.

Web sayfanıza XML uygulamalarıyla erişilmesi bekleniyorsa boş HTML öğeleri Kapanış eğik çizgisini kullanmak daha iyidir!

Özellik adları için küçük harfler kullanın

HTML5'te özellik adlarını yazarken büyük ve küçük harfleri karıştırabilirsiniz.

• Özellik adlarında büyük ve küçük harflerin karıştırılması kötü bir uygulama olarak kabul edilir
• Geliştiriciler genellikle küçük harfler kullanır (XHTML'deki gibi)
• Küçük harfle yazmak daha temiz görünüyor
• Küçük harf yazmak daha kolaydır

Özellik değerlerini tırnak içine alın

HTML5, özellik değerlerinin tırnak işaretleri olmadan yazılmasına olanak tanır. Ancak özellik değerlerini her zaman tırnak içine almanızı öneririz çünkü

• Anlamlarda büyük ve küçük harflerin karıştırılması kötü bir uygulama olarak kabul edilir
• Alıntılanan değerlerin okunması daha kolaydır
• Değerlerde boşluk varsa alıntı yapmalısınız

Çok kötü:

Değerde boşluklar olduğundan bu işe yaramaz

Resim Nitelikleri

Görselleri tanımlarken daima "alt" özelliğini kullanın. Bu özellik, resim herhangi bir nedenle görüntülenemediğinde önemlidir.

Ayrıca her zaman görselin genişliğini ve yüksekliğini tanımlayın. Bu, sayfa yüklenirken tarayıcı görsel için yer ayıracağından sayfa düzeni dökümünü azaltır.

Uzaylar ve eşitler

HTML5 eşittir işaretinin etrafındaki boşluklara izin verir. Ancak boşluk olmadığında kodun okunması daha kolaydır ve varlıkları daha iyi gruplandırır.

Uzun kod satırlarından kaçının

Şu tarihte: HTML kullanarak editör, pencereyi sola veya sağa kaydırmanız gerekiyorsa HTML kodunu okumak sakıncalıdır.

Kod satırını 80 karakterden uzun tutmamaya çalışmalısınız.

Boş satırlar ve girintiler

İyi bir neden olmadan boş satır eklememelisiniz.

En iyi okunabilirlik için boş satırlar yalnızca büyük, mantıksal olarak tutarlı kod bloklarını ayırmak için eklenmelidir.

Ayrıca daha iyi okunabilirlik sağlamak amacıyla girinti için iki boşluk ekleyin. Bunun için sekmeleri kullanmayın.

Gereksiz beyaz boşluklardan ve girintilerden kaçının. Her öğeyi girintilemeye gerek yoktur.

Gerekli değil:

Ünlü Şehirler Tokyo

Tokyo, Japonya'nın başkenti, Büyük Tokyo Bölgesi'nin merkezi ve dünyanın en kalabalık metropol bölgesidir. Japon hükümetinin ve İmparatorluk Sarayı'nın merkezi ve Japon İmparatorluk Ailesi'nin evidir.

Ünlü Şehirler Tokyo

Tokyo, Japonya'nın başkenti, Büyük Tokyo Bölgesi'nin merkezi ve dünyanın en kalabalık metropol bölgesidir. Japon hükümetinin ve İmparatorluk Sarayı'nın merkezi ve Japon İmparatorluk Ailesi'nin evidir.

Ad Açıklama

A	A'nın açıklaması
B	B'nin açıklaması

Londra

Paris

Tokyo

Atlamak ya da atlamamak ve?

HTML5 standardına göre tag ve tag kullanılamaz.

Aşağıdaki kod HTML5 standardına göre geçerli kabul edilir:

Sayfa Başlığı Bu bir metin başlığıdır

Bu bir paragraf metnidir.

Öğe belgenin köküdür. Sayfa dilini tanımlamak için önerilen yer burasıdır:

Sayfa dili bildirimi hem özel uygulamalar (ekran okuyucular gibi) hem de arama motorları için önemlidir.

Ayrıca tag veya tag yazmamanız uygulamanın DOM ve XML yapısını bozabilir. Bir etiketi atlamak da eski tarayıcılarda (IE9) hatalara yol açabilir.

Etiketi atlamalı mıyım?

HTML5 standardına göre etiketi kullanılamaz.

Tarayıcılar varsayılan olarak tüm öğeleri, oluşturdukları öğenin içindeki açılış etiketinin önüne ekleyecektir.

Etiketi çıkararak HTML yapısının karmaşıklığını azaltabilirsiniz:

Sayfa başlığı Metin başlığı

Bu bir metin paragrafıdır.

Meta veriler

Öğe HTML5'te gereklidir. Sayfa başlığı anlamla doldurulmalıdır:

Sayfanın doğru yorumlanmasını ve doğru indekslenmesini sağlamak arama motorları sayfanın dil ve karakter kodlamasının tanımı mümkün olduğunca erken bildirilmelidir:

HTML5 Söz Dizimi ve Kodlama Standartları

Bir görünüm penceresinin kurulması (görüntüleme penceresi)

"Görünüm penceresi" bir web sayfasının kullanıcıların görebildiği alandır. Bu alan cihazdan cihaza ve cihazdan cihaza değişir. cep telefonları bilgisayar ekranından daha küçük olacaktır.

HTML5, web tasarımcılarının görünüm penceresini .

Tüm web sayfalarında her zaman aşağıdaki biçimde bir görünüm kontrolü kullanmalısınız:

Bu görünüm kontrolü, tarayıcıya sayfanın boyutunun ve ölçeklendirmesinin nasıl kontrol edileceğine ilişkin talimatlar sağlar.

Widget=device-width kısmı, sayfa genişliğini geçerli cihazın ekran genişliğine uyacak şekilde ayarlar (bu, kullandığınız cihaza bağlı olarak değişir).

Başlangıç ​​ölçeği=1,0 parça setleri İlk seviye sayfa tarayıcı tarafından ilk yüklendiğinde artar.

Aşağıda, görünüm meta etiketi yüklü olan ve olmayan bir akıllı telefon ekranındaki bir web sayfası örneğini görebilirsiniz:

Görünüm meta etiketi içeren sayfa

HTML yorumları

Tek satıra kısa bir yorum yazılmalıdır: