Xhtml ve Css ile Geçerli Sayfa Şablonu Kodlama
Az önce Line25′te bir makale gördüm. Basit olarak Xhtml ve Css ile bir sayfanın kodlaması anlatılıyordu. Ne zamandır aklımda olan ama yazmaya bir türlü fırsat bulamadığım bir konuydu bu. Ben de oturup yazmaya karar verdim. Umarım size en yalın haliyle Xhtml ve Css sayfa kodlamayı anlatabilirim. Gerçekten bu iş düşündüğümüz kadar zor değil.
W3C standartlarına uygun kodlama için (valid code) Xhtml bilgimiz olması şart. Daha önceki zamanlarda sitemizde Xhtml dersleri yayınlamıştık, dilerseniz o derslerden yararlanabilirsiniz. Ancak standartlara uygun bir sayfa kodlaması için yalnızca Xhtml bilgisi başlı başına yeterli değil. Xhtml ile oluşturduğumuz kodların görünümünü düzenleyecek olan stilleri yazmak için CSS’ye de hakim olmak gerekli. Kaldı ki yazacağımız Css kodlarının da standartlara uygun olması gerekiyor. Css yazarken de belli kurallara bağlı kalmamız gerekiyor. Geçerli bir sayfa kodlaması için Xhtml ve Css’ye başlangıç aşamasında hakim olmak yeterli.
Öncelikle Xhtml kodlarımızı yazarak işe başlayalım. Sayfamız klasik olarak bir Üst bölüm (Header), bir Navigasyon alanı (Navigation), bir İçerik alanı (Content), bir Menü bölümü (Menubar veya Sidebar) ve bir Alt bilgi (Footer) alanı barındıracak. Şimdi bu alanları Xhtml olarak yazalım.
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > <head> <title>Xhtml Css Sayfa Şablonu</title> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-9" /> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <!-- XHTML KODLARIMIZ BAŞLIYOR --> <div id="sayfa"> <div id="ustbolum">Üst Bilgi Alanı</div> <div id="navigasyon">Navigasyon Alanı</div> <div id="icerik">Ana İçerik Alanı</div> <div id="yanmenu">Yanmenü Alanı</div> <div id="altbilgi">Alt bilgi Alanı</div> </div> </body> </html>
Xhtml kodlarında gördüğünüz üzere her bir Div için yukarıda bahsettiğimiz alanları tanımladık. Id seçiciler kullanarak div etiketlerimizi sırasıyla yazdık. Buraya kadar sayfamızın Xhtml kodları hazır görünüyor. Şimdi asıl önemli olan kısma geçiyoruz. Css ile Id’lerimize değerler atayacağız ve görünümü şekillendireceğiz. Css kodlarından sonra her Id’de kısaca ne yaptığımızı anlatacağız.
#sayfa {width:800px;margin:0 auto;font:bold 16px "Arial", Verdana, Helvetica, sans-serif;}
#ustbolum {height:100px;background:#2e83ff;color:#fff;}
#navigasyon {height:40px;background:#666;color:#fff;}
#icerik {width:500px;height:500px;float:left;background:#999;color:#333;}
#yanmenu {width:300px;height:500px;float:right;background:#888;color:#333;}
#altbilgi {width:100%;height:50px;background:#777;color:#fff;clear:both;}
Css kodlarımızı da yukarıdaki gibi yazdıktan sonra style.css adıyla kaydediyoruz. Sonuç BURADA yer alan sayfa gibi görünmeli. Şimdi dilerseniz kısaca Css kodlarıyla neler yaptığımızı biraz anlatalım.
Önce Sayfa isimli id’mizi tanıtmaya başladık. Burada sayfa seçicisine 800 piksel genişlik atadık. Margin değerini 0 auto yaparak sayfa id’si içinde kalacak bölümlerin tarayıcımızda ortalanmasını sağladık. Son olarak yazıtipi belirledik. Örnek sayfada dikkat ederseniz diğer alanlarda yazıtipi tanımlaması olmadığı için tüm yazılar 16 piksel Arial yazıtipinde görünmekte. Sayfa id seçiciyi en son kodlama bittikten sonra kapattık.
Ustbolum isimli id’mizde iste sayfamızın Üst bilgisini oluşturacak bir tanılamaya gittik. Yüksekliğini 100 piksel olarak atadık. Arkaplan rengi ve yazı rengini ayrı ayrı tanımlayarak Ustbolum id yazımını bitirdik.
Navigasyon bölümünde ise bir navigasyon alan görünümü istediğimiz için yüksekliğini 40 piksel tuttuk. Yine Ustbolum gibi arkaplan ve yazı rengi atamalarını yaptık.
İcerik ve Yanmenu seçici id’lerinde ise yine öncelikle genişlik ve yükseklik tanımlamaları yaptık. Burada dikkat ettiyseniz fazla olarak float değerini atadık. İcerik için float:left değerini yanmenu içinse float:right değerini kullandık. Böylelikle icerik alanındaki tüm içerik sola, yanmenu alanındaki tüm içerik ise sağa yaslanmış vaziyette görünecek.
Altbilgi bölümünde ise yer alacak içeriğin üstte görünen icerik ve yanmenu’den bağımsız olarak hizalanması içinse clear:both değerini kullandık. Böylelikle Css kodlarımızı tamamlamış olduk.
Gördüğünüz gibi yazmış olduğumuz basit kodlar sayesinde sayfa şablonumuzu oluşturduk. Üstelik W3C’nin sevdiği ve geçerli kabul ettiği bir kodlama ile bunu yaptık. Yukarıda yazılan kodlar ile oluşturduğumuz bu basit sayfayı bir nevi sayfa iskeletimiz gibi düşünebilirsiniz. Zira henüz hiçbir ekstra tanımlama ve kod eklemesi yapmadık. Sadece şablon olarak neyin nerede duracağını belirttik. Css’nin türlü nimetlerinden yararlanarak sayfalarımızı geliştirebilir ve farklı görünümler ortaya çıkarabiliriz.
Rastgele Yazılar
Xhtml ve Css ile Geçerli Sayfa Şablonu Kodlama yazısı için 4 yorum yapılmış...
Yorumunuzu Yazın
Sade ve temel hatlarıyla bir anlatım olmuş. Teşekkürler :)
Güzelmiş. Teşekkürler!
Ben de teşekkür ederim arkadaşlar ilginiz için.
hocam bu sayfayı oval köşeli hale nasıl getirebiliriz birde yapılmış hali yayınlansa çok iyi olur