🚀 HTML ile Teknik Dokümantasyon: Kod ve Terminal Elemanları

Bilgisayar kodlarını, kullanıcı girişlerini ve sistem çıktılarını semantik olarak doğru etiketlerle yapılandırma rehberi.

Selamlar, bugün teknik dokümantasyonların ve geliştirici günlüklerinin (devlogs) kalbi olan 'Computercode' etiketlerini inceleyeceğiz. Bir geliştirici olarak sadece kod yazmak yetmez, o kodu başkalarına (veya gelecekteki kendinize) doğru şekilde sunmanız gerekir.

Kod Gösterim Elemanları

  • <code>: Satır içi (inline) kod parçacıkları içindir. Genellikle tarayıcılar bunu monospace fontuyla gösterir.
  • <pre>: 'Preformatted' yani önceden biçimlendirilmiş metin. İçindeki boşlukları ve satır sonlarını olduğu gibi korur. Çok satırlı kod blokları için <code> ile birlikte kullanılır.
  • <kbd>: 'Keyboard Input'. Kullanıcının klavyeden girmesi gereken tuşları (örn: Ctrl + S) belirtir.
  • <samp>: 'Sample Output'. Bir bilgisayar programından veya terminalden alınan örnek çıktıyı temsil eder.
  • <var>: Değişkenleri (variables) temsil eder. Matematiksel formüllerde veya programlama mantığı anlatılırken kullanılır.

Ufak bir dipnot: Kendi teknik serüvenimizi paylaştığımız Ovid Game Günlüğü yazılarında, terminal çıktılarını her zaman <samp> içinde, kullandığımız komutları ise <kbd> ile veriyoruz. Bu sadece görsel bir tercih değil; ekran okuyucular bu etiketler sayesinde görme engelli bir geliştiriciye 'bu bir klavye tuşudur' bilgisini verebiliyor. Semantik HTML, profesyonelliğin imzasıdır.

🚀 Sanal Kodlama Alanı Yükleniyor...

Teknik İpuçları

  1. Escape Karakterleri: pre veya code içinde < veya > gibi HTML karakterleri kullanacaksanız, bunları &lt; ve &gt; şeklinde yazmalısınız. Aksi halde tarayıcı bunları yeni bir etiket sanabilir.
  2. Yatış Kaydırma (Horizontal Scroll): Büyük kod blokları (pre) için CSS'de mutlaka overflow-x: auto; kullanın. Bu, kodun sayfadan taşmasını engeller ve mobil cihazlarda okunabilirliği korur.
  3. Kombinasyon: En profesyonel görünüm, pre etiketinin içine code etiketini sarmallayarak elde edilir. pre yapıyı kurarken, code içeriğin bir programlama dili olduğunu belirtir.

Teknik dökümantasyon yazmak, bir oyunun arayüzünü tasarlamak kadar titizlik ister. Temiz kod, temiz sunumla değer kazanır.

Ovid Game Studio | Teknik Notlar ovidgame.com