Web Tasarımı Rehberi #1

22 Mart 2006 tarihli, Tasarım köşesine ait yazı.

Web Tasarımı RehberiStandartlara uygun, esnek ve kaliteli web tasarımı yapmak isteyenler için güzel bir yazı dizisine başlıyorum. İlk bölümde html standartları, meta’lar ve kodu kendinizin yazmanın avantajlarına değineceğim.

Standardınızı Baştan Belirleyin

Bir web sitesi kodlamaya başladığınızda ilk yapmanız gereken html standardınızı belirlemek olsun. W3C tarafından belirlenen standartlara uygun kod yazmak farklı platformlarda ve tarayıcılarda aynı sonucu almanızı sağlayacaktır. Standardınızı html kodunuzda belirtmek için şu aşamaları takip edin:

  • DOCTYPE’ınızı Seçin:
    DOCTYPE, html ve xhtml dosyanızın ilk satırında bulunan, tarayıcınıza bu dosyanın nasıl işleneceğini bildiren bir bilgidir. DTD (document type definition) olarak eğer sayfanızda frame’ler kullanıyorsanız XHTML 1.0 Frameset, kullanmıyor ve biraz esnek bir kod yazmak istiyorsanız XHTML 1.0 Transitional, normal şartlarda ise XHTML 1.0 Strict kullanmanızı öneririm. Bu tanımlamaların ayrıntılarına W3C’nin XHTML 1.0 sayfasından ulaşabilirsiniz. Sonuçta kodunuzun ilk satırı şunlardan biri olacak:

    <!DOCTYPE html
    PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
    “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

    <!DOCTYPE html
    PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
    “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

    <!DOCTYPE html
    PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN”
    “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>

  • html Etiketi:
    Tüm dokümanı kapsayan etiket olan html içine XHTML kullanacağımızı belirten bir bilgi ekliyoruz. DOCTYPE sonrasında gelen satır muhtemelen şöyle olmalı:

    <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>

  • Belirlediğiniz Standarda Uygun Devam Edin:
    Doküman standardınızı nasıl belirlediyseniz ona uygun kodlar yazmaya çalışın. Arada bir W3C HTML Validator servisini kullanarak varsa hatalarınızı düzeltin.

Sayfanıza Uygun Header Bilgileri Yazın

html içerisine ilk yazdığınız head etiketinin içerisindeki header bilgilerini düzenlerken dikkatli olmanız gerekiyor, çünkü sayfanızın arama motorları tarafından tanınması ve belli konularda üst sıralarda yer alabilmeniz için bu bilgiler kullanılır. Kullanabileceğiniz header’lar şunlar:

  • Kodlama: Elbette en önemli bilgi dokümanınızın hangi charset ile kodlandığını belirten content-type meta’sıdır. Burada dokümanın text/html tipinde olduğunu ve karakter kodlamanızı belirtirsiniz. Örnek olarak:

    <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />

  • Başlık: title sayfanızın başlığını belirler. Sitenizdeki bir makale sayfasının başlığını Makale Başlığı - Site Adı şeklinde tanımlamanız arama motorları için uygun olacaktır. xyz kelimesini arattığımızda bir sayfanın başlığındaki xyz ile başka bir sayfanın h2 header’ı içinde yer alan xyz farklı rating’ler kazandıracak, sonuçta xyz’nin title‘da belirtildiği sayfa daha üst sıralarda yer alacaktır.

    <title>Yazı Başlığı - Site Başlığı</title>

  • Dil: Sayfanızın dilini belirtmeniz bazı durumlarda gerekli ve yararlı olabilir. Türkçe bir sayfa için şöyle bir tanımlama uygun olacak:

    <meta http-equiv=”content-language” content=”tr-TR” />
    <meta name=”language” content=”tr-TR” />

  • Açıklama: Sayfanın kısa bir açıklamasını description meta’sı içinde verebilirsiniz. Yine arama motorları için gerekli bir tanımdır, sakın atlamayın:

    <meta name=”description” content=”Sayfanın açıklaması.” />

  • Anahtar Kelimeler: keywords meta’sı da en az description kadar, hatta daha önemli, direkt sayfanızın doğru tanınmasını sağlayacak bir bilgidir. Burada sayfanızla ilgili anahtar kelimeleri, aralarına virgül koyarak tanıtıyorsunuz. Dikkat! Tüm aklınıza gelen, prim yapacağını düşündüğünüz kelimeleri yazarsanız muhtemelen search engine’ler tarafından bloklanırsınız.

    <meta name=”keywords” content=”anahtar,kelimeler,virgüllerle,ayrılmış” />

  • Robots: Sayfanızın arama motorları tarafından indexlenmesini ve sayfadaki bağlantıların analiz edilmesini ayarlayabileceğiniz bir etikettir. Google bu konuyla ilgili hayli güzel bir açıklama sayfası yazmış. Çoğu site tarafından kullanılan şöyle bir tanımlamayı keyowords ve description‘dan önce koymanız mantıklı olacaktır:

    <meta name=”robots” content=”all” />

  • Links: Stil dosyanızı tanımlama, bir sonraki-önceki-üst sayfaya bağlantı verme durumunda links etiketini kullanabilirsiniz. Örnek kullanımlar aşağıdaki şekilde:

    <link rel=”stylesheet” type=”text/css” xhref=”stildosyasi.css” mce_href=”stildosyasi.css” />
    <link rel=”shortcut icon” type=”image/x-icon” xhref=”favicon.ico” mce_href=”favicon.ico” />
    <link rel=”alternate” hreflang=”en-GB” xhref=”ingilizce_sayfa.html” mce_href=”ingilizce_sayfa.html” />
    <link rel=”alternate” type=”application/msword” media=”print” xhref=”sayfanin_word_hali.doc” mce_href=”sayfanin_word_hali.doc” />
    <link rel=”next” xhref=”sonraki_sayfa.html” mce_href=”sonraki_sayfa.html” />

    Son kullanımda start, up, first, prev, next, last durumlarını da belirtebilirsiniz. Bunlar Mozilla’nın bazı sürümlerinde ve başka bazı tarayıcılarda kullanıcılara hayli kolaylık sağlamaktadır. Bunun dışında favicon ve feed’leri belirtirken de link etiketi kullanılır, detaylı açıklamasını yazının devamında bulabilirsiniz.

Mümkünse Kodu Kendiniz, Elinizle Yazın

Halen kullanan vardır elbet, Word’de ve Dreamweaver benzeri programlarda WYSIWYG rüzgarına kapılıp koda hiç bulaşmadan web sitesi yapılabiliyor. Html kodlarını otomatik oluşturan bu gibi programların çıktıları genellikle hem standartlara uymaz, hem de gereksiz bir sürü etiket/bilgi içerir. Bu yüzden eğer ciddi bir tasarım yapacaksanız kodu mümkünse -bir yere kadar- kendiniz yazmanız gerekli. Kod yazarken dikkat etmeniz gereken birkaç nokta var:

  • XML kuralları: Kodlarken birkaç basit, ama önemli xml kuralına dikkat etmeniz gerekiyor. Mesela doküman içinde açtığınız bir etiketi kapatmak (özel durumlar hariç), etiketlerin iç içe geçmelerini engellemek gibi.
  • Indentation: Gerektiğinde etiketleri girintili başlatmak, tablar ve boş satırlar bırakmak kodunuzun okunabilirliğini artıracaktır. Bunu alışkanlık haline getirmeye bakın.
  • Yorumlar: Kodunuzun önemli bölümlerini ayırırken html yorumlarını kullanabilirsiniz. Bunlar tarayıcıda görüntülenmeyecektir.

    <!-–Burada sayfanın footer bilgisi bulunuyor-–>

Kaynaklar - Web Tasarımı Rehberi #1

  • http://www.w3.org/TR/xhtml1/
  • http://validator.w3.org/
  • http://www.w3schools.com/html/html_meta.asp
  • http://alexandre.alapetite.net/doc-alex/meta/index.en.html
  • http://www.comptechdoc.org/independent/web/html/guide/htmlhead.html
  • http://www.google.com/webmasters/remove.html

« İnternet, Web 2.0 ve Gelecek Hakkında
Web Tasarımı Rehberi #2 »

Yorumlar - Başa Dön

hakan
23 Mart 2006

İnsanları bilgilendirdiginiz için size teşekkür ediyorum.

slay3r
25 Mart 2006

Rehberin ikinci sürümünüde bekleriz. :^)

zafer balkan
26 Mart 2006

Devamını sabırsızlıkla bekliyoruz…

ahmet alp balkan
29 Nisan 2006

güzel olmuş ellerinize sağlık.

nXs
9 Ağustos 2006

Teşekkürler güzel ve yararlı bir yazı.. şimdi 2.sine geçeyim

buraqq
9 Ağustos 2008

teşekkürler çok yararlı bilgiler ve özgün bir yazı..



Yorum Yazın

(gerekli)

(gerekli)


Yorum yapacaklar için bilgi:
Verdiğiniz mail adresi sitede asla görüntülenmeyecektir. Sonraki yorumlarınız için isim, e-posta gibi bilgiler cookie olarak bilgisayarınızda saklanacaktır.



Önizleme: