Osman S Börütecene

alemlerin aslı hayaldir

CSS ve XHTML ile Temel Sayfa Tasarımı

16 Şubat 2007 Cuma 15:15, Osman Seyit Börütecene


Bir süredir temel, basit web tasarımı üzerine yazdığım bir iki yazıdan ötürü Google arama sonuçlarından hatırı sayılır bir ziyaret alıyorum. Ancak maalesef söz konusu yazılar pratikte baştan sona bir web sitesi hazırlamak için yeterli değiller. Ben de, bu konudaki bilgi talebini karşılamak amacıyla bir kaç yeni yazı daha yazmaya karar verdim. Bu yazılar, “web sitesi nasıl yapılır, web sayfası nasıl yapılır, internet sitesi nasıl yapılır, basit bir web sayfası nasıl yapılır, anasayfa nasıl yapılır” gibi Google’da bu aramaları yaparak buraya gelen ziyaretçilere yardımcı olabilecek nitelikte olacak.

Güncelleme: Ceyhun Aksan da benzer bir yazı yazmış, onu da okumanızı öneririm.

Başlangıç olarak, mümkün oldukça çok kişiyi ilgilendirebilecek bir sayfa düzenini seçmek faydalı olacaktır. Örneğin baş, orta ve son kısımları olan, orta kısmı sağ veya sol tarafta bir menü için ya da benzeri linkler ve bilgiler için ayrılmış, diğer kısmı da içeriğin kendisi için ayrılmış bir tasarım olabilir:

Yukarıda gördüğünüz, sağda ya da solda bir bara sahip basit tasarım örneğini sabit genişlikte ve tarayıcı içine enine ortalanmış biçimde hazırlayacağız. Buradaki örnekte evvela son yıllarda en çok moda olan haliyle barın sağ tarafta olduğu halini yapalım.

Önce ihtiyacımız olan html ana parçalarını kodlayacağız. Bunu, bilgisayarınızda kopyala/yapıştır yöntemiyle bir notepad dosyasına sayfa.html adıyla kaydedebilirsiniz.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- Bu satır çok önemli, bu satırın sayfanın en başında yer alması ve kendinden önce bir satır yer almaması gerekiyor. Hazırlayacağımız CSS + XHTML tasarım web standartlarına uyumlu olacağından Internet Explorer 6'da istediğimiz gibi görüntülenebilmesi için bu zavallı tarayıcıya tasarımımızın çağdaş bir tasarım olduğunu bu satır anlatacak. -->
<html>
<head>
<title>CSS ve XHTML ile Temel Sayfa Tasarımı</title><!-- Tarayıcı penceresinin başlığında görünen yazı buraya yerleştirilir -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /><!-- Bu satır, tarayıcıya web sayfamızın karakter setini belirtiyor. Normalde karakter seti olarak UTF-8 kullanırsanız web sayfanızdaki Türkçe karakterler dünyanın her yerinde olması gerektiği gibi görünür. Ancak bu çalışmayı Windows üzerinde notepad ile yapıyorsanız şuna dikkat etmelisiniz; Windows notepad, burada da dünya standartlarına uymadığından text dökümanınızı UTF-8 olarak kaydetmez. Kaydetmesi için "Save as", ya da "başka bir adla kaydet" seçeneğinden dosya kodlaması seçip Unicode ya da UTF-8 seçeneklerinden birini seçmelisiniz ki dosyanız uluslararası standartlarda kaydolsun. Windows Vista'da bu durum değişti mi bilmiyorum ama sanmam -->
<link rel="stylesheet" title="ccs-tasarim" href="style.css" type="text/css" media="all" /><!-- Burada, CSS dosyamızın yerini belirtiyoruz. Bu satırla ilgili ayrıntılı açıklamalar yapmak için başlı başına bir yazı yazmaya değer ama şimdilik, burada dosya ismini sadece "style.css" olarak verdiğimiz için, bu html dökümanı ile aynı dizinde (klasörde) bulunması gerektiğini söylemiş olalım yeter -->
</head><!-- Web sayfamızla ilgili önemli bilgileri tarayıcıya anlatma işlemini burada bitirdik. <head> kısmı, bundan çok daha fazla işe yarar ancak burada sadece temel şeylere yer verdim. Örneğin, sitenizin favori ikonunun adresini burada belirtebilirsiniz. Sadece web robotları tarafından okunmasını istediğiniz bazı bilgileri bu kısma yerleştirebilirsiniz. -->
<body><!-- Şimdi web sayfamızın ziyaretçiler tarafından görünecek kısmına başlıyoruz -->
<div id="baslik">
<h1>Web sayfamızın ana başlığı, adı.</h1>
<p>Sayfamıza dair açıklamalar bu kısma girebilir</p>
</div>
<div id="orta_kismi_saracak_olan_div">
    <div id="icerik_kismi">
       <p>Burada web sayfamızın içeriği bulunacak</p>
    </div>
    <div id="yan_bar">
      <p>Buraya yan tarafta bulunmasını istediğimiz şeyleri koyacağız. </p>
    </div>
<br style="clear: both;"/> <!-- bu satırı firefox'ta bulunan bir bug (bug olup olmadığı tartışmalı bir konu, bu yazının sınırını aşar) nedeniyle koyuyoruz -->
</div>
<div id="alt_kisim">
<p>Buraya genelde "her hakkı mahfuzdur" gibi laflar yazılır.</p>
</div>
</body>
</html>

Evet, sayfa.html bitti. Şimdi CSS kısmına geçelim. Bunu da yine kopyala/yapıştır yöntemiyle bir notepad dosyasına style.css adıyla kaydedebilirsiniz. Bu iki dosyanın aynı klasörde olmasına dikkat edin.

/* CSS dosylarında yorumlar ve notlar bu işaretler arasında yazılır */
/* Aşağıda, az evvel yarattığımız html dökümanına görsel biçimi verecek olan CSS kodları var */
/* baslik, alt_kisim, orta_kismi_saracak_olan_div bölümlerinin 700px eninde olmasını ve ortalanmasını istiyoruz. ayrıca yaptığımız işi daha iyi anlayabilmek için parçaları farklı renklerde hazırlayacağız */
#baslik, #alt_kisim, #orta_kismi_saracak_olan_div {
width: 700px;
margin: auto;
}
#baslik, #alt_kisim {
background: #999;
}
/* bunlardan icerik_kisminin solda, yan_bar_kisminin ise sagda durmasini istiyoruz. icerik kisminin 500px genisliğinde, yan bar kısmının ise 200px genişliğinde olmasını istiyoruz */
#icerik_kismi {
width:500px;
float: left;
background: #666;
}
#yan_bar {
width: 200px;
float: left;
background: #333;
}
/* alt_kisim, üstte yarattığımız sola yaslama yönteminden gelen yaslanma emrini sıfırlamalı */
#alt_kisim {
clear: both;
}

Sayfamızın iskeletini tamamladık. Deneyebilirsiniz. Oluşturduğunuz sayfa kabaca aşağıdaki gibi görünüyor olmalı:

Web sayfamızın ana başlığı, adı.

Sayfamıza dair açıklamalar bu kısma girebilir

Burada web sayfamızın içeriği bulunacak

Buraya yan tarafta bulunmasını istediğimiz şeyleri koyacağız.


Buraya genelde “her hakkı mahfuzdur” gibi laflar yazılır.

İşte kabaca böyle. Tablo kullanmadan CSS ve XHTML ile basit bir sayfa yapısı hazırladık. Webde bu alanda çok sayıda örnek var ama maalesef Türkçe içerik gerek nitelik gerekse nicelik olarak tatmin edici değil. Elbette bu döküman da tek başına ne kadar faydalı olabilir bilemiyorum ama web standartlarında, CSS ile sayfa tasarımı yapmak isteyenlere bir çıkış noktası olacaktır diye düşünüyorum. Bu konuda bir dahaki sefere tablosuz tasarımın takıntı haline getirilmemesi gerektiği, web standartlarının amacı, yetkinliği vb. konuları tartışmaya niyetliyim.

Technorati Tags: , , , , , ,

'CSS ve XHTML ile Temel Sayfa Tasarımı' başlıklı yazıya 15 yorum yapılmış.

  1. Mehmet Dogan diyor ki:

    Osman eline saglik. Cok guzel bir makale olmus. Turkce CSS kaynaklari listesine ekledim hemen. Bu arada esas benim bekledigim yazi son paragrafta bahsettigin konu. Bircok kisi standartlari bas ustune koyup, neyin onemli oldugunu unutur. Bu konuda yaklasik bir bucuk yil once bir yazi yazmistim. Ilgini cekebilir. Yeni makalelerini sabirsizlikla bekliyorum

  2. Osman Seyit Börütecene diyor ki:

    Teşekkür ederim, bakıyorum yazılara.

  3. burak inner diyor ki:

    yazınızı okudum fakat ben daha çok sizin siteniz üzerine birşeyler söylemek istiyorum.

    öncelikle sitenizdeki font seçimi ve büyüklükleri gerçekten çok güzel.
    yazınızı okumak için zorlanmıyorum.

    nedense benim en önemli kriterim bu.

    Fakat yazınızda html kodlar arasına yazığınız yorumları farklı bir fontla, renkle veya italik yazsaydınız çok daha güzel olurdu diye düşünüyorum.

    Herşey çok şık tasarımdan önce sitenin okunabilir olması için olmalı

    iyi çalışmalar.

  4. Osman Seyit Börütecene diyor ki:

    @burak inner:

    okunabilirliğe ben de birincil derecede önem veriyorum. kodlar için de farklı bir font ve satır bazında çok açık renkte bir arkaplan renk değişimi yaptım. yorumlarınız için teşekkür ederim.

  5. burak inner diyor ki:

    “Fakat yazınızda html kodlar arasına yazığınız yorumları farklı bir fontla, renkle veya italik yazsaydınız çok daha güzel olurdu diye düşünüyorum.”

    Ben sizin yaptığınız yorumların farklı renkte olmasını istemiştim.. O şekilde sizin yorumlarınızı takip etmek daha kolay olacaktır diye düşünmüştüm.

  6. Osman Seyit Börütecene diyor ki:

    Hmmm. Evet gayet mantıklı. Bir ara ilgilenip eklerim farklı bir renk, highlight gibi mesela.

  7. zeki dayı diyor ki:

    merhaba. web konusunda hiçbir tecrübem olmamasına rağmen komutlarınız sayesinde ilk adımı attım. devamını sizi izleyerek bulacağım. paylaşımızın için sonsuz saygılar ve teşekkürler

  8. Osman Seyit Börütecene diyor ki:

    çok teşekkür ederim.

  9. Cumali Ekinci diyor ki:

    Üstad,
    Vallahi süpersin.
    “Net”sin, “sade”sin, “mütevazi”sin, tavrını da koymuşsun.
    Çalışmalarının ve tarzının devamını dilerim…

  10. gevv diyor ki:

    Tesekkurler

  11. Uğur SAMSA diyor ki:

    Eline sağlık. Bir sorum olacak. Şuradaki kodlarda

    #yan_bar {
    width: 200px;
    float: left;
    background: #333;
    }

    float: right;

    Olması gerekmiyor mu? Sağ tarafta olsun demiştik ya.

  12. Osman Seyit Börütecene diyor ki:

    @uğur: hayır gerekmiyor. nedeni şöyle: biz iki sütunu yani büyük olan ve küçük olan yanyana sola yaslıyoruz ki küçük olan büyüğün ardından sola yaslanınca sağda dursun.

    şimdi biraz daha derin bir cevap: buradaki tasarımda sola yaslamak gerekiyor. ama aslında senin söylediğin gibi düzenlemek daha doğru. en doğrusu büyük sütunu hiçbiryere yaslamayıp küçük sütunu sağa yaslamak. işin ehli böyle yapar. ancak bunu anlatmak daha uzun bir yazı gerektiriyor.

  13. Türkçe CSS Kaynakları ve Yazıları - Web-Öğrencisi diyor ki:

    […] CSS ve XHTML ile Temel Sayfa Tasarımı […]

  14. selim diyor ki:

    hocam ben ie de çalıştıramadım bu kodları. firefoxda sorun yok.

  15. ACR diyor ki:

    bende kodları notepade yapıştırdım ama .htm de gözükmüyor. bu güne kadar title tagıyla ilgili hiç bir sorun yaşamamıştım bu örnekte title bile gözükmedi!

Siz de fikrinizi belirtin

Merhaba!

osman

Site İçi Arama

Sayfalar

Arşiv

RSS

Site Map

Sosyal Mevzular

Standartlar