HTML Bilgisayar Kodu

Öğreticiler ve belgeler sık sık komutlar, özellik adları ve HTML parçaları gösterir. Bu metni normal bir paragrafa yapıştırırsanız tarayıcı boşlukları birleştirebilir ve < karakterini gerçek bir etiketin başlangıcı sayabilir. HTML, örneklerin okunabilir ve güvenli kalması için bilgisayar metnine yönelik öğeler sunar. Bunlar olmadan bir ders sayfası bir snippet'in girintisini «yiyebilir» veya daha kötüsü, bir <p> örneğini dersin kendi düzenini bozan canlı bir etikete dönüştürebilir. Bu oturum kodu, tuşları ve program çıktısını doğru rolle işaretlemeyi — ve örnek HTML içinde HTML olduğunda açısal parantezleri kodlamayı — öğretir. Bu öğeleri anlamsal etiketler gibi düşünün: tarayıcıya ve yardımcı teknolojilere o parçanın sıradan düzyazı olmadığını söylerler ve okumaya yardımcı olduğunda varsayılan olarak sabit genişlikli yazı tipi verirler.

Bilgisayar kodu öğeleri nedir?

Bu öğeler kodu, klavye girişini veya program çıktısını temsil eden metni işaretler — sıradan düzyazıyı değil. Tarayıcının uygun bir varsayılan yazı tipi seçmesine yardımcı olurlar (code ve pre için çoğu zaman sabit genişlikli) ve yardımcı araçlara aralığın bilgisayarla ilgili olduğunu söylerler. Karakterleri yine siz yazarsınız; etiketler anlam ekler ve pre ile düzeni korur. Pratikte code bir cümle içinde kısa bir jetonu vurgular, pre bir blokta boşlukları ve satır sonlarını dondurur, kbd kullanıcının bastığı gerçek tuşları işaretler, samp ise bir programın veya komutun döndürdüğünü gösterir. Öğeyi yalnızca «koda benziyor» diye seçmeyin: metnin rolüne göre seçin. Böylece sayfa insanlar için, bu öğeleri biçimlendirebilecek CSS için ve içerik türünü duyuran yardımcı teknolojiler için daha net olur.

Doğrudan yanıt

Bir cümle içinde kısa bir parça için code kullanın. Boşlukların ve satır sonlarının kalması gerektiğinde pre kullanın. Yaygın bir blok kalıbı <pre><code>...</code></pre> şeklindedir. Bu roller gerçekten uyuyorsa tuşları kbd ile, örnek program çıktısını samp ile işaretleyin. Örnekin kendisi HTML olduğunda, tarayıcının yanlışlıkla canlı öğeler oluşturmaması için ham < ve > yerine < ve > yazın. Bu oturumdan yalnızca bir kural ezberleyecekseniz şunu ezberleyin: işaretlemeyi göstermek, işaretlemeyi çalıştırmak değildir — ve varlık kodlaması ikisi arasındaki sınırdır. Gerisi (satır içi ve blok, klavye ve çıktı) aynı dürüst anlambilim mantığını izler.

Öğelere bir bakışta

Satır içi kod

Bir cümle içinde kısa bir jetondan söz ettiğinizde onu code ile sarın. Bu, tüm bir bloğu zorlamadan sözcüğü görsel olarak ayırt edilir tutar. Öğreticilerde CSS özellik adları, HTML öznitelikleri, kısa komutlar ve API tanımlayıcıları açıklayıcı cümlelerin ortasında geçer; code bu parçalar için doğru yerdir. Okuyucu cümleyi tarayıp teknik terimi hemen bulabilir ve varsayılan stil (çoğu zaman sabit genişlikli) bunun sıradan bir sözlük sözcüğü olmadığını pekiştirir. pre bloklarını çok satırlı listeler için saklayın — paragrafın ortasındaki tek bir sözcük için değil.

Örneği okumak

• Cümle normal paragraf metnidir
• Yalnızca özellik adı code içindedir
• Okuyucular teknik jetonu hızla bulabilir
• Bu çok satırlı bir liste değildir — bunun için pre kullanın
  Bu kalıp iyi ölçeklenir: aynı cümlede okuma akışını bozmadan birkaç code olabilir. Yaygın hata, tüm cümleyi code ile sarmak veya tek bir terim için pre kullanmaktır — ikisi de öğenin rolünü abartır ve sayfayı görsel olarak gürültülü kılar.

pre ve code ile bloklar

pre ön biçimli demektir: boşluklar ve satır sonları yazdığınız gibi kabaca korunur. code'u pre içine yerleştirmek, bir kod bloğu için net bir kalıptır. HTML örneklerinde açısal parantezleri kodlayın. pre olmadan normal HTML boşluk dizilerini birleştirir ve birçok satır sonunu tek boşluğa çevirir — öğrencilere göstermek istediğiniz girintiyi yok eder. pre ile snippet yapısı okunabilir kalır. pre+code birleşimi iki fikri birden iletir: «bu ön biçimli bir blok» ve «içerik koddur». Birçok stil rehberi ve sözdizimi vurgulayıcı tam olarak bu iç içe yerleşimi bekler.

Kodlama neden önemlidir

Öğretici sayfanızın içine ham bir <p> yazarsanız tarayıcı, <p> karakterlerini göstermek yerine gerçek bir paragraf oluşturabilir. <p> olarak kodlamak örneği güvenle gösterir. Entities oturumu karakter başvurularını daha derin işler; burada HTML demolarındaki açısal parantezler için yalnızca alışkanlığa ihtiyacınız vardır. Aynı kural <div>, <span>, <a href="..."> ve göstermek isteyip etkinleştirmek istemediğiniz her etiket için geçerlidir. Ham işaretlemeyi «sadece bakmak için» yapıştırırsanız ders belgesi şekil değiştirir: ekstra öğeler belirir, düzen kayar ve öğrenci örneğin yanlış olduğunu sanır oysa sorun kodlama eksikliğidir. Refleksi çalıştırın: HTML örneklerinde önce < ve >; sonra tarayıcıda metnin istediğiniz gibi göründüğünü doğrulayın.

Klavye girişi ve örnek çıktı

Kullanıcının bastığı tuşları anlatırken kbd kullanın. Bir programın veya komutun örnek çıktısını gösterirken samp kullanın. Dürüst kalın — yalnızca sabit genişlikli görünüm için sıradan sözcükleri kbd olarak işaretlemeyin. kbd «bu klavye girişi» der; samp «bu programın yazdırdığı veya döndürdüğü» der. Bir dosya adından veya CSS özelliğinden söz ediyorsanız doğru seçim hâlâ code'dur. Rolleri karıştırmak okuyucuları ve yardımcı teknolojileri şaşırtır. Kısayol kılavuzlarında ardışık birkaç kbd (örneğin Ctrl + S) doğal okunur; bir terminal sonuç satırında samp, metnin talimat değil çıktı olduğunu netleştirir.

Editörünüzde alıştırma

1. font-size özelliğini code içinde anan bir cümle yazın.
2. < ve > kullanan iki kısa HTML satırıyla bir pre+code bloğu ekleyin.
3. Kaydetme kısayolu için kbd içeren bir ipucu satırı ekleyin.
4. İsteğe bağlı: sahte komut çıktısı için bir samp satırı ekleyin.
5. Kaydedip açın — pre içindeki boşlukların kaldığını ve kodlanmış etiketlerin metin olarak göründüğünü doğrulayın.
6. Geçici olarak bloğa kodlamadan ham bir <div> yapıştırın, yenileyin, sorunu görün, sonra kodlayın.
   Bu kısa laboratuvar oturumun üç ana kalıbını kapsar: satır içi, güvenli blok ve klavye/çıktı. 6. adım sizi şaşırtmazsa harika — riski içselleştirmişsinizdir. Düzen «bozulursa» o anı, HTML demolarında kodlamanın isteğe bağlı olmadığının canlı kanıtı olarak kullanın.

Örnekleri bozan hatalar

• Çok satırlı kodu yalnızca pre olmadan code içine koymak — satır sonları ve girinti birleşebilir
• Sayfaya kodlamadan ham <div> veya <p> yapıştırmak — canlı öğe olur
• Uzun sıradan düzyazı yazıları için pre kullanmak (ön biçimli bilgisayar metni içindir, deneme için değil)
• Klavye girişi olmadığı halde her teknik sözcüğü kbd ile işaretlemek
• pre veya code'u kapatmayı unutup sonraki metnin ön biçimli stilde sıkışması
  Bu hatalar tam da tarayıcı «yardım ettiği» için yaygındır: etiketleri yorumlar, boşlukları normalleştirir ve eksik kapanışa kadar stilleri uygular. Çare anlambilim artı kodlamadır: doğru öğe rolü ve HTML örneklerinde açılar için varlıklar. Bir kez canlı öğeye dönüşen bir snippet'i düzelttikten sonra ham işaretlemeyi düşünmeden nadiren yine yapıştırırsınız.

Özet

• code kısa satır içi bilgisayar metnini işaretler
• pre bloklar için boşlukları ve satır sonlarını korur
• pre ile code'u birleştirmek yaygın bir çok satırlı kalıptır
• HTML örneklerinde < ve > karakterlerini < ve > olarak kodlayın
• kbd ve samp, bu roller uyduğunda klavye girişi ile örnek çıktıyı kapsar
• Öğeyi yalnızca varsayılan yazı tipi görünümüne göre değil, metnin anlamına göre seçin
  Bu alışkanlıklarla öğretici sayfalar komutları ve parçaları düzeni bozmadan ve örnek işaretlemeyi yanlışlıkla çalıştırmadan gösterir. İzlekte ilerlerken gösterim HTML'ini sunulacak metin gibi ele almaya devam edin — güvenli, okunabilir ve anlamsal olarak dürüst.