Web Tasarımı Rehberi #2

Web tasarımı rehberinin ikinci bölümünde, kullanmanız ve kullanmamanız gereken html etiketlerine, daha ziyade standartlar arası geçişte hangi etiketler kaldırıldı, neler eklendi, ne gibi değişiklikler var, bunları anlatıyorum.

Alışkanlıklarınızdan Kurtulun…

Eskiden html kodu yazmaya başladığımızda haydaa, Allah ne verdiyse kaptırıp giderdik. Yazı ortalı mı olacak? Ver alttan <center>‘ı… Yazının rengini mi değiştireceğiz? Yaz <font color="red">, geç git… Sonradan öğrendik ki bu yaptıklarımıza tarayıcılar bize olan saygılarından ses etmiyorlarmış. Her kodun bir standardı varmış, seçtiğimiz standartlara göre kodlarımızı düzenlememiz gerekiyormuş. Mesela:

• Ortalama: Artık <center> yerine CSS yardımıyla ayarlanmış div‘ler kullanıyoruz. Eğer sayfadaki tüm bölümlerin tarayıcıda ortalanmasını istiyorsanız (bu sitedeki gibi), id’sini belirttiğiniz bir div için genişliğini belirtip margin:0 auto; demeniz gerekiyor. Yok, içindeki yazıyı ortalamak istiyorsanız text-align: center; olarak tanımlamalısınız. div-span ve id-class karşılaştırmasına daha sonra geleceğim.
• Yazıtipi düzenleme: Yukarıda da belirttiğim gibi, <font> diye girip istediğiniz font’u, büyüklüğü ve rengi seçmek yerine istediğiniz sayfa elemanının CSS kodunda font-family, font-size, line-height, color gibi bir çok özelliği bir anda belirleyip istediğiniz yerlerde kullanabilirsiniz. Örnek olarak:
  

  <font face=”Verdana, Arial, sans-serif” size=”2″ color=”red”>Dikkat</font>

  Her seferinde böyle bir tanımlama yapmak yerine standartlar diyor ki mesela onemli diye bir tip tanımla:

  .onemli {
  font-family: Verdana, Arial, sans-serif;
  font-size: 1.2em;
  color: red;
  }

  Kullanmak istediğin yerlerde de kolayca bu tipi çağır:

  <span class=”onemli”>Dikkat</span>

  CSS dosyasının sadece 1 kere, sayfanın ise her zaman yükleneceğini; ayrıca sayfadaki her “önemli” tipindeki tanımlarda tekrar tekrar bunları belirteceğimizi düşündüğümüzde font yerine CSS tanımlamasının daha mantıklı ve esnek olacağını görüyoruz.

• Kalın, italik ve alt çizgili: (Bold ve italic için) b ve i etiketleri yerlerini şimdilik strong ve em etiketlerine bıraktı, ancak yine CSS kullanarak tanımlamakta yarar var. Zaten alt çizgili yazmak için u kullanmak yerine CSS tanımlaması yapmaktan başka çareniz yok.
• Applet: Zaten özel kullanım dışında başvuracağınızı düşünmediğim java applet’leri ise applet etiketi yerine object ile kullanılmaya başlandı. Applet’ler ile ilgili ileride konuşacağım.
• Diğerleri: Yukarıdakiler dışında basefont, dir, isindex, listing, menu, nextid, plaintext, s, strike, xmp gibi etiketleri de kullanmamanız gerektiğini belirtirim.

Kullanmamanız gereken etiketler deprecated, yani standardın bu sürümünde kısmen destekleniyor, ancak yeni sürümlerde kaldırılacak etiketlerdir. Dikkat ederseniz XHTML1.0 standardının Frame ve Transitional tanımlarında halen kabul edildiğini, ancak Strict standardında yasaklandığını göreceksiniz.

Yeni Etiketlere Şans Tanıyın

Fazla bilinmeyen, çoğu HTML 4.01 standardında tanımlanan bazı etiketlere alışmanız, gerektiği yerde kullanmanız yarar sağlayabilir.

• Sonradan eklenmiş veya silinmiş yazılar: Bir makale yazdınız, ancak sonradan bazı bölümlerini değiştirdiniz. Bunu genelde yazının sürümlerini belirterek yaparız ama pratik bir kullanım için del ve ins etiketlerini kullanabiliriz. cite ve datetime kullanarak da neden ve ne zaman eklediğimizi ya da sildiğimizi belirtebiliriz. Örnek olarak:
  

  O yazıyı ben<del cite=”http://www.dahianlamindakideayriyazilir.com/” datetime=”20060326″>de</del> de okudum.

  O yazıyı bende de okudum.

• Kısaltmalar: Bir kısaltmayı (abbreviation) veya bir özel ismin baş harflerini (acronym) abbr ve acronym etiketlerini kullanarak açıklayabilirsiniz. Bazı yönden bu iki etiket benzerlik gösteriyor, hangisini kullanacağınıza karar verin ve açıklamasını title kullanarak belirtin.
  

  <acronym title=”World Wide Web”>WWW</acronym>

  WWW

• Yazı yönü: Günlük kullanımda ne kadar işinize yarar emin değilim ama espri yeteneği olan bu etiketi de tanıtmak istedim. Tabii palendromik cümlelerde fazla etkisini gösteremiyor:
  

  <bdo dir=”rtl”>ey edip adanada pide ye :) acikbilgi.com sunar</bdo>

  ey edip adanada pide ye :) acikbilgi.com sunar

• Tanım, kod, değişken ve yazıya gönderme: Komik bir çeviri oldu: yazıya gönderme :) Anlatmak istediğim citation yani. Bazı tanımlamaları, kodları ve örnekleri kendi etiketleri içinde yazabilirsiniz. Ne kadar yararı olur bilmiyorum, belki arama motorları bu farklara dikkat ediyordur diye düşünüp kullanılabilir.
  

  <dfn>Tanım</dfn>
  <code>Kodlar</code>
  <samp>Örnek kod veya output</samp>
  <var>Değişken</var>
  <cite>Gönderme</cite>

  Tanım
  Kodlar
  Örnek kod veya output
  Değişken
  Gönderme

• Tanım listesi: Belki bir yazının sonunda özel kelimeleri tanımladığınız bölümde dl, dt ve dd etiketlerini kullanabilirsiniz. Örnek olarak:
  

  <dl>
  <dt>Hypertext Markup Language</dt>
  <dd>The authoring software language used on the Internet’s World Wide Web. HTML is used for creating World Wide Web pages.</dd>
  <dt>Cascading Style Sheets</dt>
  <dd>Language used to describe how an HTML document should be formatted.</dd>
  </dl>

  Hypertext Markup Language

  The authoring software language used on the Internet’s World Wide Web. HTML is used for creating World Wide Web pages.

  Cascading Style Sheets

  Language used to describe how an HTML document should be formatted.

• Adresler: Şimdiye kadar kullanıldığına rastlamadığım, gerçek adresleri belirten bir etiket. Yine arama motorları için kullanılabilir.
  

  <address>Barış Manço
  81300 Moda</address>

  Barış Manço
  81300 Moda

  Ne kadar aşinayız değil mi bu adrese? Ruhu şad olsun, biz şanslıyız, Barış Abi’yle büyüdük…

Html ve Css Validator’lara Başvurun

Kullandığınız etiketler ve attribute’ların standardınıza uyup uymadığını kontrol etmek için bu servisleri kullanın:

• html ve xhtml validator
• css validator

Web tasarımı rehberi devam edecek…

Kaynaklar

• http://www.codehelp.co.uk/html/deprecated.html
• http://www.w3schools.com/tags/default.asp

Yorumlar - Başa Dön

Yorum Yazın