t-infection.com | tasarım oyuncakları, web teknolojileri » W3C http://www.t-infection.com tasarım oyuncaklarımız ve web teknolojilerine dair kısa kısa... Sat, 02 Apr 2011 17:47:23 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Xhtml ve Css ile Geçerli Sayfa Şablonu Kodlama http://www.t-infection.com/xhtml-ve-css-ile-gecerli-sayfa-sablonu-kodlama/ http://www.t-infection.com/xhtml-ve-css-ile-gecerli-sayfa-sablonu-kodlama/#comments Mon, 27 Jul 2009 15:28:45 +0000 webthese http://www.t-infection.com/?p=861 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.

]]> http://www.t-infection.com/xhtml-ve-css-ile-gecerli-sayfa-sablonu-kodlama/feed/ 4 Html5.0′daki Yeni Yapısal Etiketlere Gözatalım http://www.t-infection.com/html50daki-yeni-yapisal-etiketlere-gozatalim/ http://www.t-infection.com/html50daki-yeni-yapisal-etiketlere-gozatalim/#comments Thu, 01 Jan 2009 21:56:05 +0000 webthese http://www.t-infection.com/?p=513 Html dilinin şu anda kullanılan 4. versiyondan 5′e geçiş sürecini yaşadığını biliyoruz. Bu alanda W3C grubunun yaptığı ara çalışmaları da görme imkanımız oldu. Html 5.0 dili gerçekten bünyesine katılan yeni özellikler sayesinde sanıyorum yeniden gönüllerimizi fethedecek. 2003 yılının son dönemlerinde geliştirilmeye başlanan Html5.0 yapılan öngörüye göre 2010 yılının sonlarına doğru final sürümüyle karşımızda olacak. Sanıyorum bu döneme kadar yapılan ara çalışmalarla da gelişimi daha yakından görebileceğiz. Tabi yine tarayıcı uyumu konusu gündeme geliyor. Html5.0′ın final sürümü duyurulduğunda tarayıcı cephesinde ne gibi bir gelişme yaşanır bunu zaman gösterir. Ancak kişisel görüşüm daha önce yaşadığımız tarayıcı uyumsuzluğu sorunlarının bu sefer daha az olacağıdır. (Bazı kaynaklarda 2012 gibi tarihler gördüm ama umarım bu kadar uzun bir süreç olmaz)

Bu yazımızda sizlerle Html5.0 ile hayatımıza girecek olan bazı yeni etiketleri tanıtacağız. Html5.0′ın biraz daha esnek yapıya bürünerek geliştiğini görmek gerçekten heyecan verici. Dilerseniz hemen yeni etiketlerimize bir bakalım.

Header, Section, Nav, Article, Aside, Footer Etiketleri

Html5.0′ın biraz daha esnek bir yapıya büründüğünü söylemiştik. Bu esnek yapıyı yeni kullanmaya başlayacağımız Yapısal etiketlerde de görebiliyoruz.

Blog sahipleri çok iyi bileceklerdir ki bir blog sayfası header (üst bölümü, logo ve sloganımızın bulunduğu bölüm), navigasyon (menü alanı diye açıklayabiliriz), sidebar (yan menü bölümü), content (ana içerik bölümü), footer (alt bilgi bölümü) alanlarından oluşmaktadır. Klasik manada bir blogun kod olarak yapısı şu şekildedir. (Html4 ile yazılan örnek kodumuz)

<div id="pager">
<div id="header">Üst Bölüm</div>
<div id="navigation">Navigasyon Alanı</div>
<div id="maincontent">Ana içerik bölümü</div>
<div id="sidebar">Yan menü ve bileşenlerimiz</div>
<div id="footer">Sitemiz alt bilgi bölümü</div>
</div>

Pek az farkla genellikle blog sitelerimizin ortaya koyduğu kod mantığı budur. Html4′ün bize sunmuş olduğu div etiketine yaptığımız id tanımlamaları ile klasik olarak blog stilindeki sayfamızı şekillendirebiliyor ve Css ile de bu bölümlere stiller atayabiliyorduk. (Tabi bölümlerin ve blokların farklı yerlerde olmaları, farklı boyut ve işlevlere sahip olmaları da tamamiyle Css ve Js işlevidir) Html5.0′ta ise başlığımızda belirttiğimiz etiketlerle aynı blog sayfasının kodunu yazalım. Kodları inceleyince gerçekten çok kolay olduğunu göreceksiniz.

<section>
<header>Üst Bölüm</header>
<nav>Navigasyon Alanı</nav>
<article>Ana içerik bölümü</article>
<aside>Yan menü ve bileşenlerimiz</aside>
</section>
<footer>Sitemiz alt bilgi bölümü</footer>

Son yazmış olduğumuz kod bölümünde Html5.0′daki yeni etiketlerimizin kullanımını görüyorsunuz. Etiketlerin kullanımı ve yerleşimi sanıldığı kadar zor değil. Sitemizin Footer bölümünü oluşturmak için <footer> etiketi açıp usulüne uygun biçimde sonlandırmak yeterli oluyor. Bunun gibi diğer etiketlerin kullanımı da aynı. Yalnızca section etiketine biraz değinmek istiyorum. Section web sayfazımın görünen bölümünü bir kitap sayfası olarak kabul ettiğimizde bir yaprağı gösteren ana belirleyici etiket oluyor. Yani web sayfalarımızda kesit almamıza yarıyor. Section etiketinin kullanımı tamamen size kalmış. Kullanıcınıza göstereceğiniz web sayfasının belirli bölümlerini section etiketi içine alıp gösterebiliyorsunuz.

Etiketlerimizin kısaca işlevlerine biraz değinelim. Header etiketi yazımızın önceki bölümlerinde bahsettiğimiz gibi sitemizin header bölümünü yani üst bilgi bölümünü tanımlıyor. Html5′te açılan her header etiketi bir section etiketinin üst bölümünü niteliyor. Dilediğiniz kadar header etiketi açarak üst bilgi tanımlaması yapabiliyor bazı ögelere atıfta bulunabiliyorsunuz.

Nav etiketi ise bir nevi menü alanı gibi görülebilir. Site içi sayfalarımıza veya dış kaynaklara vereceğimiz bağlantı alanlarının bulunduğu ana navigasyon sahasını tanımlamak için bu etiketi kullanacağız. Yine klasik web kodlamada yaptığımız gibi nav etiketi içinde ul, li gibi liste etiketlerinden faydalanarak menü birimleri oluşturabilir ve farklı bağlantı seçenekleri sunabiliriz.

Article ise sitemizin ana içerik bölümünü ifade ediyor. W3C’nin tanımına göre Article etiketi ile sayfamızdan bağımsız bir parça elde ediyoruz. Örneğin, son yazılan haberler, blog gönderileri, son forum postları gibi. Bu ögeleri article içinde sayfamızda gösterebiliyoruz. Bağımsız parçadan kastedilen şey de bu sanırım.

Aside etiketi ise blog sahiplerinin çok iyi bildiği Sidebar alanını niteliyor. Bu alanda yan menüler, sitemize ait reklamlar, bileşenler yer alabilir ve bunları bu etiket dahilinde kullanıcılarımıza gösterebiliriz.

Header, Nav, Section, Article, Aside gibi yapısal etiketler Html5 ile hayatımıza girecek olan yeni etiketlerden sadece birkaçı. İlerleyen zamanlarda diğer yeni etiketlerden de bahsetmeye çalışacağım. Umarım sizler için faydalı olmuştur.

Kaynaklar

http://wiki.whatwg.org/wiki/Main_Page
http://blog.whatwg.org/
http://www.w3.org/html/wg/
http://dev.w3.org/html5/spec/Overview.html
http://www.w3.org/TR/html5/
http://www.w3.org/TR/html5-diff/
http://www.ibm.com/developerworks/library/x-html5/
http://html5.org/tools/web-apps-tracker
http://www.readwriteweb.com/archives/5_exciting_things_in_html_5.php

]]> http://www.t-infection.com/html50daki-yeni-yapisal-etiketlere-gozatalim/feed/ 0 HTML 5.0 W3C Tarafından Duyuruldu! http://www.t-infection.com/html-50-w3c-tarafindan-duyuruldu/ http://www.t-infection.com/html-50-w3c-tarafindan-duyuruldu/#comments Sat, 26 Jan 2008 23:06:31 +0000 webthese http://www.t-infection.com/html-50-w3c-tarafindan-duyuruldu/ Html 5.0 Duyuruldu

Efendim geçte olsa yayınlama ve duyurma fırsatı bulduğumuz güzel bir olayı sizlere aktarmak istiyorum. Yılların Html’si, 1999 yılından bu yana 4. versiyonunu kullandığımız HTML (Hyper Text Markup Language) dili 22 Ocak’ta yapılan duyuruyla 5.0 sürüme yükseltildi. Html 4 ile 5 versiyon arasındaki farkları bu sayfada detaylı biçimde görmek mümkün.

Uzun süredir Html’nin revize edilme haberlerini duyuyor hatta Xhtml 2.0 ile olacak olan ilişkisini ve yeni eklenecek olan elementleri merak ediyorduk. W3C’nin bizlere duyurduğu
kadarıyla gelişmeleri takip etme ve okuma fırsatımız da oldu. 22 Ocak itibariyle W3C’nin duyurusunu aldık ve Html 5.0′ın çıkışını kutluyoruz.

Birçoğumuzun tasarıma başlarken öğrenmek için kendini parçaladığı bu dilin bu denli gelişimini gördükçe çok seviniyorum. Html 5.0 hakkında ileride detaylı bir yazı yazmayı düşünüyorum. Özellikle yeni eklenen etiketler ve parametreler hakkında “yeniden” konuşacak olmak beni oldukça heyecanlandırıyor.

Umuyoruz ki yakın zamana kadar tarayıcılarımız Html 5.0′ın yeni etiketlerini ve özelliklerini destekler de bizlerde seviniriz. Tarayıcı desteği konusunda Mozilla’dan yana şüphemiz yok ancak Internet Explorer’ın bu yeni duruma nasıl uyum göstereceğini zamanla göreceğiz. Tasarım ve kodlama ile uğraşan herkes için hayırlı olması dileğiyle.

]]> http://www.t-infection.com/html-50-w3c-tarafindan-duyuruldu/feed/ 3