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, xhtml, tasarım, web tasarımı, örnek, web standartları, iki sütun
'CSS ve XHTML ile Temel Sayfa Tasarımı' başlıklı yazıya 15 yorum yapılmış.
Siz de fikrinizi belirtin
Merhaba!
Site İçi Arama
Sayfalar
Arşiv
- Mayıs 2008
- Nisan 2008
- Mart 2008
- Şubat 2008
- Ocak 2008
- Aralık 2007
- Kasım 2007
- Ekim 2007
- Eylül 2007
- Ağustos 2007
- Temmuz 2007
- Haziran 2007
- Mayıs 2007
- Nisan 2007
- Mart 2007
- Şubat 2007
- Ocak 2007
- Aralık 2006
- Kasım 2006
17 Şubat 2007 15:25
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
18 Şubat 2007 08:40
Teşekkür ederim, bakıyorum yazılara.
19 Şubat 2007 15:16
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.
19 Şubat 2007 21:11
@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.
21 Mart 2007 05:09
“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.
21 Mart 2007 05:18
Hmmm. Evet gayet mantıklı. Bir ara ilgilenip eklerim farklı bir renk, highlight gibi mesela.
22 Nisan 2007 02:18
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
22 Nisan 2007 02:47
çok teşekkür ederim.
8 Mayıs 2007 19:36
Ü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…
11 Haziran 2007 11:02
Tesekkurler
3 Eylül 2007 01:29
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.
3 Eylül 2007 09:09
@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.
15 Ekim 2007 18:42
[…] CSS ve XHTML ile Temel Sayfa Tasarımı […]
10 Aralık 2007 08:57
hocam ben ie de çalıştıramadım bu kodları. firefoxda sorun yok.
22 Nisan 2008 17:40
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!