HTML Varlıkları

Bazı karakterler HTML'de özeldir. Sayfanın sıradan metninde ham bir < yazarsanız tarayıcı bir etiketin başladığını sanabilir. Ham bir & yazarsanız bir varlığın başladığını sanabilir. Karakter varlıkları, bu simgeleri ayrıştırıcıyı karıştırmadan görünür metin olarak gösteren güvenli kodlardır. Onlar olmadan işaretlemeyi göstermek isteyen bir ders onu çalıştırmaya başlar: düzen bozulur, hayalet öğeler belirir ve öğrenci örneği suçlar — oysa sorun kaçışsız ayrılmış karakterdir. Bu oturum varlık sisteminin kendisini öğretir — yalnızca bir kez < yapıştırmayı değil. Hakim olduktan sonra <, > ve &nin herhangi bir düzenleyicide güvenilir metin olarak göründüğü öğreticiler, belgeler ve başvuru sayfaları yazabilirsiniz. Varlıkları görmek istediğiniz ile HTML'nin yorumladığı arasında bir köprü gibi düşünün: kaynakta yazılan kod, ekrandaki gliften farklıdır ve bu fark kasıtlıdır. Öğretim sayfalarında bu köprü, okunabilir bir örneği kırık bir belgeden ayırır.

HTML varlığı nedir?

HTML varlığı, işaretlemede bir karakteri yazmanın kodlanmış yoludur. Çoğu adlandırılmış varlık & ile başlar ve ; ile biter. Tarayıcı sayfayı oluştururken kodu gerçek karakterle değiştirir. Varlıklara en çok HTML'nin zaten işaretleme sözdizimi olarak kullandığı karakterler için, bazen de yazması zor simgeler için ihtiyaç duyarsınız. Sayısal biçimler de vardır (örneğin < için <), ancak bu oturumda odak en yaygın adlandırılmış olanlardır: lt, gt, amp, nbsp, ayrıca yararlı quot ve copy. Sondaki noktalı virgül süs değildir — kodun nerede bittiğini ve normal metnin nerede başladığını ayrıştırıcının bilmesi için varlığı kapatır. Atlarsanız tarayıcı sonraki harfleri yutabilir veya garip bir sonuç gösterebilir. &…; çiftini tek bir birim olarak öğrenmek, yeni başlayan hatalarının çoğunu önler. Örnekte bir varlık gördüğünüzde soldan sağa okuyun: ampersand, ad, noktalı virgül — üç parça, tek birim.

Doğrudan yanıt

Bir karakter ham metin olarak güvensiz veya belirsiz olacaksa varlık kullanın. Önce bunları ezberleyin: < için <, > için >, & için &, bölünmeyen boşluk için  . Adlandırılmış varlığı her zaman ; ile bitirin. Ham karakter belgeyi kıracak veya yanlış okuyacaksa paragraflarda ve HTML öğreten örneklerin içinde kullanın. Bu oturumdan yalnızca bir kural hatırlayacaksanız şunu hatırlayın: ayrılmış bir simgeyi göstermek, onu sözdizimi olarak etkinleştirmek değildir — ve varlık ikisi arasındaki sınırdır. Gerisi (ölçülü nbsp, sıradan düzyazıyı kodlamamak, kaynak ile ekranı karşılaştırmak) aynı işaretleme dürüstlüğünü izler. Öğretim sayfalarında < / > / & refleksi kas belleği olur: önce kaçış, sonra tarayıcıda doğrulama. Bu alışkanlık, bir öğretici kendi örnek etiketlerini «yediğinde» saatlerce hata ayıklamaktan kurtarır.

Yaygın varlıklar bir bakışta

Cümlelerde ayrılmış karakterler

Normal bir paragrafta etiketleri öğretirken veya anarken, metin kalsınlar diye varlıklarla gösterin. Escape olmadan «<p> etiketini kullanın» yazan bir öğretici, cümlenin ortasında gerçek bir paragraf oluşturabilir. Aynı şey alıntılamak istediğiniz <div>, <span>, <a> ve diğer etiketler için de geçerlidir. Marka adlarındaki (AT&T), film başlıklarındaki (Tom & Jerry) veya «ve» işaretli metindeki ampersandlar da, geçersiz bir varlık başlatma riski olmadan görünür glifi istiyorsanız & ister. Alışkanlığı çalışın: karakter HTML sözdiziminin parçasıysa ve onu glif olarak görmek istiyorsanız kodlayın. Teknik belgelerde bu kalıp sayfa başına onlarca kez çıkar — bu yüzden uzun bir rehber yazmadan önce refleksi otomatikleştirmek değerlidir.

Örneği okumak

• <p> orada bir paragraf öğesi oluşturmadan <p> karakterlerini gösterir
• Tom & Jerry Tom & Jerry olarak görünür
• Geçerli varlık olmadan ham bir & ayrıştırma sorunlarına yol açabilir
• p ve Jerry gibi sıradan harfler varlık gerektirmez
  Bu kalıp ölçeklenir: aynı cümlede akışı bozmadan birden çok varlık olabilir. Yaygın hata, kapanış etiketlerini gösterirken < ile >yi karıştırmak veya noktalı virgülü unutup ayrıştırıcının «yediği» harfleri görmektir. Her zaman kaynak kodu ile oluşturulan metni karşılaştırın — kaynaktaki <p> ile ekrandaki <p> arasındaki fark tam olarak varlığın yaptığı iştir. Öğrenci bunu bir kez görünce kural büyü olmaktan çıkar, mekanik olur. Bu karşıtlığı aklınızda tutun: kaynak = kod; ekran = glif.

Bölünmeyen boşluklar

 , tarayıcıların birleştirdiği parçalar arasında yumuşak satır sonu noktası olarak kullanmaması gereken bir boşluktur. Kısa bir etiketi sayıyla veya birlikte kalmasını istediğiniz sözcükleri tutmak için yararlıdır. Onu her yere düzen aracı gibi serpmeyin — gerçek tasarım için normal boşlukları ve CSS'i tercih edin. Dijital tipografide bölünmeyen boşluk dar bir sorunu çözer: «Bölüm 4», «10 kg», «s. 12» veya satır sonunda bölünmemesi gereken kısa bir özel ad.  yi kenar boşluğu, sütun veya girinti taklit etmek için kullanırsanız CSS ile görünmez karakterlerle savaşmış olursunuz — kırılgan, bakımı zor ve erişilebilirlik için kötü.  yi tipografik birimleri birleştirmek için saklayın; kalan görsel aralık için margin, padding, gap ve white-space kullanın. Kararsızsanız normal boşlukla başlayın; yalnızca birlikte kalması gereken parçalar arasında çirkin bir kırılma görürseniz  ye geçin.

Adlandırılmış varlıklar ve simgeyi yazmak

Birçok simge için dosya UTF-8 olarak kaydedildiyse gerçek karakteri yapıştırabilirsiniz (ileride Charset oturumuna bakın). Varlıklar özellikle <, > ve & için önemlidir çünkü bu karakterler HTML sözdiziminin parçasıdır. Yaygın adlandırılmış biçimleri öğrenmek, öğretim sayfalarını ve örnekleri farklı düzenleyicilerde güvenilir kılar. «©» veya «→» yapıştırmak UTF-8'de sıkça iyi çalışır; bir öğretici paragrafının ortasına ham < yapıştırmak neredeyse hiç güvenli değildir. Bu yüzden oturum, belgenin geri kalanı Unicode'u serbestçe kullansa bile üç sözdizimi karakteri için varlıklarda ısrar eder. Düzenleyiciler, sistemler arası kopyalama ve derleme araçları bazen kodlamayı değiştirir; < ve & bu yolculukları belirsiz bir gliften daha iyi atlatır. HTML'yi HTML içinde öğretirken adlandırılmış varlıklar yazar, ayrıştırıcı ve öğrenci arasında ortak dildir. Önce onları hakim olun; sonra dekoratif bir simgenin varlığa mı yoksa doğrudan Unicode'a mı ihtiyacı olduğuna durum durumuna karar verin.

Düzenleyicinizde alıştırma

1. <div> metnini < ve > kullanarak gösteren bir paragraf yazın.
2. & ile güvenle yazılmış bir AT&T satırı ekleyin.
3. Satırlara bölünmesini istemediğiniz kısa bir başlık ile sayı arasına   koyun.
4. Sayfayı açın ve simgelerin doğru göründüğünü doğrulayın.
5. Kaynağı görüntüleyip varlık kodlarını bulun — kaynağı oluşturulmuş metinle karşılaştırın.
6. Bilerek bir varlığın noktalı virgülünü unutun, yenileyin, garip sonucu fark edin, sonra düzeltin.
   Bu adımlar döngüyü kapatır: yazmak, oluşturmak, kaynağı incelemek ve bilerek hata üretmek. 6. adım özellikle yararlıdır — ; olmadan ne olduğunu görmek, yalnızca okumaktan daha iyi kuralı kazır. Bir belgeleme projesinde çalışıyorsanız aynı kalıbı üç yerde tekrarlayın: bir düzyazı paragrafı, bir etiket örneği ve & içeren bir marka satırı. Refleks otomatikleşene kadar her kaynak/ekran karşıtlığını zihinsel olarak not edin.

Varlıkları bozan hatalar

• Varlığın sonunda ; unutmak
• Tam varlık olmayan metinde yalnız & yazmak (ampersand istediğinizde & tercih edin)
• Hiç varlık gerektirmeyen sıradan harf ve sözcükleri kodlamak
• CSS aralığını öğrenmek yerine  yi kenar boşluğu ve düzen yerine kullanmak
• Etiket örnekleri gösterirken < ile >yi karıştırmak
  Diğer yaygın sürçmeler: varlıkları zaten «yemiş» bir blogdan işaretleme kopyalamak (düzenleyicide < görür ve yine ham yapıştırırsınız); HTML varlıklarını URL kaçışlarıyla (%3C) yanlış yerde karıştırmak; bağlamı okumadan özniteliklerle paragraf metninin aynı kurallara uyduğunu varsaymak. Özniteliklerde tırnak ve ampersandlar da önemlidir — ama bu oturumun merkezi refleksi aynıdır: görünür sözdizimi karakteri → varlık. Bir örnek «kaybolunca» veya düzende delik açınca sayfayı kaynak görünümünde gözden geçirin. Erken düzeltmek, sonra tüm öğreticiyi ayıklamaktan daha ucuzdur.

Özet

• Varlıklar ayrılmış veya özel karakterleri HTML metninde güvenle gösterir
• <, >, & ve   ile başlayın
• Adlandırılmış varlıklar & ile başlar ve ; ile biter
• Metin olarak görünmeleri gerektiğinde açılı parantezleri ve ampersandları kodlayın
• Sıradan düzyazı harflerini sebepsiz varlıkla kodlamayın
• Varlıklar, bir HTML sayfası HTML öğrettiğinde özellikle işe yarar
  Bu altı satırı zihinsel başvuru kartı olarak saklayın. Sembol ve charset oturumlarında yine «kaynakta kod / ekranda glif» alışkanlığı çıkar — ama sözdizimi varlıklarının çekirdeği (lt, gt, amp) şimdiden sağlam olmalıdır. Bir meslektaşa neden ham Tom & Jerrynin riskli, Tom & Jerrynin güvenli olduğunu açıklayabiliyorsanız bu dersin özünü kavramışsınızdır. Üç sözdizimi karakterinin kaçışı otomatikleşene kadar pratik yapın.