Joomla! Nedir?

Joomla! sistem olarak bir CMS'tir. CMS, yani açılım olarak, Content Managment System (İçerik Yönetim Sistemi). Joomla şuanda dünya üzerinde en çok tercih edilen ve alanında ödüller kazanmış içerik yönetim sistemidir. Bu sistem sayesinde hayal edebileceğiniz her türlü siteyi oluşturabilir, yayınlayabilir ve geliştirebilirsiniz. Yani Joomla ile ticari bir siteden, topluluk sitelerine; kişisel sitelerden, haber sitelerine her türlü siteyi oluşturabilirsiniz.

Joomla ile kurmuş olduğumuz sitemizle alakalı tüm işlemleri bu panelden ilgili menüler altındaki yönetimlerden yapacağız. Bu yönetimlerin neler olduğuna ve nasıl kullanabileceğimize, ayrıntılı bir şekilde göz atacağız.
   Yönetim paneli üst menülerine geçmeden önceki, yönetim paneli ana sayfamız üzerinde hızlı erişim menü öğelerinin neler olduğuna ve fonksiyonlarına bakalım. 

 Bu menü öğesi, sitenize yeni bir içerik girmek için kullanacağınız öğedir, sitenize bir içerik ekleyebilmek için öncelikle bu içeriğinize ait bir bölüm ve kategori oluşturmanız gerekmektedir. Joomla içerik yönetim sistemi, hiyerarşik ve düzenli bir içerik oluşturmanıza imkan tanır, dolayısıyla bu oluşturacağınız içeriklerin daha ulaşılabilir ve gerek kullanıcılarınızın gerekse de yönetim panelini kullanacak olan yöneticilerin bu içeriklere daha rahat ulaşıp karışıklık olmasına engel olmak için gerekli bir düzenlemedir.
İleride, yönetim paneli üst menüsü ve öğelerini ele alırken bu konularla ilgili detaylı açıklamalar geleceğinden, burada sadece yüzeysel olarak hızlı menü öğelerini tanımak adına ele almaktayız.

 Yazı yöneticisi, sitenize eklemiş olduğunuz tüm içerikleri bir arada görebileceğiniz alandır, bu alandan tüm içeriklerinizi gördüğünüz gibi çeşitli düzenlemeleri de buradan yapabilirsiniz.

Oluşturulan içeriklerin ön sayfada gösterilmek üzere yayınlanmış olan öğelerinin hepsini bir arada görebileceğiniz ve bu içeriklerin, sıralama, yayından alma vb… yönetimlerini yapabileceğiniz alandır.

Önceden de değindiğimiz gibi, içerikleri (yazılarımızı) hazırlayıp bunları ekleyebilmemiz için,öncelikle bu içerikleri belli bölümler altında, yazıların çeşidine göre toplamalıyız. Bu sebeple öncelikle bölüm yönetiminden içeriklerimizin türüne göre bölümler oluşturmalıyız. Bu menü öğesinden ilgili bölüm yönetimi alanına gidebilir ve bu belirtilen işlemleri buradan yapabiliriz.

Kategori yöneticisi, tıpkı bölüm yönetimi gibi içeriklerimizi ekleyebilmemiz için bölüm yönetiminden bu içeriklerimize ait bölümler oluşturduktan sonra bu bölüme bağlı kategoriler oluşturmamız gereklidir. Bu sayede düzenli ve kolay erişilebilir içerikler hazırlayabilir bu kategori veya kategoriler altında içeriklerimizi oluşturabiliriz.

Ortam yöneticisi sitemizde gerek içeriklerde gerekse de modüllerde kullanacağımız tüm resim dosyalarını yönetebileceğimiz alandır. Bu alandan resim dosyalarımızla ilgili, silme, taşıma, yükleme vb… tüm işlemleri yapabiliriz.

Menü yöneticisi, joomla ön yüzünden kullanıcılarımızın belirlemiş olduğumuz menü öğelerine ulaşmakta kullanacaları, ana menü, iletişim, vb… menü öğelerini oluşturma ve yönetmek üzere işlemlerimizi yapabileceğimiz bölümdür

Sitemizin, gerek ön yüzü gerek yönetim paneline ait kullanıcı lisanlarını düzenleyip yeni diller ekleyebileceğimiz alandır. Varsayılan olarak bu alanda Türkçe ve İngilizce dilleri mevcuttur.

Sitenize kayıtlı kullanıcılarınızı yönetebileceğiniz, yeni kullanıcıları ekleyip özelliklerini düzenleyebileceğiniz bölümdür.

Sitenizin işleyişiyle alakalı tüm ayarların bulunduğu bölümdür, bu bölümdeki tüm işlemler sitenizin doğru çalışabilmesi için gerekli ayarları barındırır ve bu ayarlar joomla ana dizininizdeki configuration.php isimli dosyada tutulur.

Buraya kadar olan bölümde, yönetim panelindeki hızlı menü öğelerinin genel olarak neler olduğunu inceledik, şimdi yönetim paneli üst menüsünde bulunan tüm menü öğeleri, bu öğelerin görevleri ve tüm özelliklerinin detaylıca anlatılacağı ikinci bölümümüze geçiyoruz.

KAYNAKLAR:   http://www.joomlatr.org/index.php/joomla-nedir.html
                           http://www.bilgisayardershanesi.com/bilgisayar_dersleri/joomla-dersleri.html

Patch Yazılımlar

Yama, bilgisayar programlarında oluşan bir hatayı ya da programın içeriğindeki hatalı bir fonksiyonu düzelten bir programcıktır. Genelde bilgisayarlardaki en büyük güvenlik sorunlarından olan yazılım açıklarına müdahale amacıyla kullanılır.

Yazılımlarda var olan açıkları kullanan kötü niyetli kişiler, bilgisayarlarda istedikleri kodları çalıştırabilirler. Çalıştırılan bu kodlar sayesinde bilgisayarda kapılar açıp kişisel bilgiler öğrenilebilir, donanımlarda hata oluşturup bilgisayarın yapısı bozulabilir. Verilerin içerikleri de değiştirilebilir.

Yazılım firmaları, açıkları kötü niyetli insanlardan önce bulup, bunu gidermek için yama (patch) yayınlamaya çalışırlar. Her programda açık vardır ve olmaya devam edecektir. Önemli olan, açıkların üreticiler tarafından kısa sürede tespit edilmesi ve bunları giderici programların yani yamaların hızlı bir şekilde yayınlanmasıdır. Bunu da açık kaynak kodlu yazılımlar çok hızlı bir şekilde yapmaktadır.

Programların yamalarının takip edilip ve yüklenmesi önemlidir. Programlardaki “update” veya “live update” kısımlarını aktif halde tutulmalıdır.

KAYNAK:  http://www.bilgisayardershanesi.com/bilgisayar_dersleri/patch-yazilimlar.html

Blogger Chrome Eklentileri

En sevdiğim Blogger Eklentileri sitesi olan eklentileri.blogspot.com yeni yazıyla karşımızda.Evet bugün Blogger için Chrome Eklentilerini yazacağım bu site sayesinde.

Bu yazımızda , işinize yarayabilecek bir kaç adet chrome eklentisinden bahsedeceğiz..

Sadece blogger kullanıcıları için değil , webmaster olan herkesin işine yarayabilecek eklentilere değineceğiz..

RSS Feed Reader

RSS Feed Reader her sitede ve blogda olması gereken bir eklentidir.Girdiğiniz sitelerde bu eklenti varsa o sitedeki haberleri anında alırsınız.Eğer sizin sitenizde de varsa saayfanıza gelen kişiler yeni yazılarınızda yine gelir ve böylece ziyaretçi sayınız artar.Alexa sıralamanız artar..

RSS Feed Reader Ekle

Awesome Screenshot

Awesome Screenshot adı üstünde ekran görüntüsü olmaya yarayan bir eklentidir.Ekran görüntüsü alıp bunlar üzerinde değişiklik yapabiliriz...

Awesome Screenshot Ekle

SEO Status Pagerank/Alexa

Bu eklenti ile her girdiğiniz sitenin alexa ve pagerank değerini görebilirsiniz

SEO Status Pagerank/Alexa Ekle

KAYNAK : http://eklentileri.blogspot.com/2012/12/blogger-chrome-eklentileri.html

CSS Pseudo-Sınıfları

Pseudo sınıf ve elementleri CSS’i destekleyen web tarayıcıları tarafından otomatik olarak tanınan özel sınıf ve elementlerdir. Bu sınıf ve elementler (x)html hiyerarşisi ile erişemediğimiz element ve sınıflara erişmemizi sağlar. Pseudo sınıfı bir elementi farklı sınıflara böler(örn: link elementini active, visited vd. sınıflarına böler) Pseudo elementi ise bir elementi alt kısımlara böler (örneğin bir paragrafın ilk harfi, bir paragrafın ilk satırı gibi.)

Pseudo sınıfına örnek:

1. a:visited {color: red;}

Pseudo elementine örnek:

1. p:first-line { font-weight: bold; }

Pseudo sınıf ve elemtleri HTML class özelliği olarak belirtilmemiştir. Normal sınıflar pseudo sınıf ve elementleri ile kullanılabilir.

1. a.disariyalinkller:link, a.disariyalinkller:visited {color: maroon;}

Aynı şekilde id seçicileri ile birlikte de kullanılabilirler

1. a#altkisim:link{font-weight: bold;}

Pseudo sınıflarını da ikiye ayıra biliriz. Link Pseduo Sınıfıları ve Dinamik Pseudo Sınıfları

Link Pseudo sınıfı

Yanlızca linklere uygulanan iki Link Pseduo sınıfı vardır. :link ve :visited

:link - Ziyaret edilmemiş sayfanın linkine stil tanımlaması yapmak için kullanılır. Ancak bir çok web tarayıcısı yapılan stil tanımlarını ziyaret edilmiş sayfa linklerine de uygular.

:visited - Henüz ziyaret edilmiş sayfa linklerine stil tanımlaması yapmak için kullanılır.

1. a:link {color: blue;}
2. a:visited {color: red;}

Bunun yerine genelde aşağıdaki gibi bir kod da kullanılır

1. a {color: blue;}
2. a:visited {color: red;}

Bu kodlama ile kullanıcaya ziyaret ettiği sayfa linkleri farklı renkte gösterilerek içeriksel bir bilgi görsel olarak verilebilir.

Browser Uyumu:

Internet Explorer 5.0, 5.5, 6.0, 7.0: destekliyor ;
Netscape Navigator 6.0, 7.0: destekliyor ;
Mozilla 1.0: kısmen ;
Opera 5.0 ‘ 6.0: destekliyor
 

Dinamik Pseudo Sınıfları

Dinamik Pseudo Sınıfları sayfa görünümüne çok büyük katkılar yapabilir. Bu sınıflar genelde linklere uygulanır ancak bir çok kullanım alanları vardır. tanedir :focus,:active ve :hover

Not

Pseudo sınıflarında sıralama önemlidir. Genel kullanımda “link-visited-hover-active,” sıralaması yapılmalıdır. Tüm sınıflar içinse “link-visited-
focus-hover-active.” sıralaması yapılmalıdır.

:focus - Odaklanan elemente stil tanımlası yapmak için kullanılır Örn: input alanına içerik girerken

:active - Aktif olan elemente stil atamak için kullanılır.

:hover - Bir elementin üzerine Farenin imleci geldiğinde yapılacak tanımlama için Örn: bir linkin üzerine fare ile geldiğimizde renk değiştirmesini sağlamak için

Linkler için genel kullanım

1. a:link {color: navy;}
2. a:visited {color: gray;}
3. a:hover {color: red;}
4. a:active {color: yellow;}

:focus için bir örnek verecek olursak

1. input:focus {background: silver; font-weight: bold;}

Browser Uyumu:

Internet Explorer 5.0, 5.5, 6.0, 7.0: destekliyor ;
Netscape Navigator 6.0, 7.0: destekliyor ;
Mozilla 1.0: destekliyor ;
Opera 5.0 ‘ 6.0: destekliyor

İlk Çocuk Elementi seçmek

Diğer bir pseudo sınıfımız :first-child‘dır.

first:child: Belirtilen elementin ilk Çocuk Elementine stil atamak için kullanılır.

1. p:first-child {font-weight: bold;}
2. li:first-child {color:#f00;}
3. …
4. <div>
5. <p>Bu paragraf ilk çocuk elementtir ve sonuç olarak kalın olacaktır</p>
6. <ul> <li>Bu liste ilk çocuk elementtir ve font rengi kırmızı olacak</li> <li>Bu <strong>çocuk element </strong>değil</li> <li>Bu da değil</li> </ul>
7. <p>Bu pragraf <em>bir</em> çocuk element değil.</p>
8. </div>

Browser Uyumu:

Internet Explorer 5.0, 5.5, 6.0 desteklemiyor 7.0: destekliyor ;
Netscape Navigator 6.0, 7.0: destekliyor ;
Mozilla 1.0: destekliyor ;
Opera 5.0 ‘ 6.0: desteklemiyor

:lang Pseudo Sınıfı

Lang pseudo sınıfı içerikteki bir elemente farklı bir dil de yazmamızı sağlar.

Atanabilecek dil listesi ve kullanılacak kısaltmalara ISO 639 and RFC 1776 standards erişebilirsiniz.

1. <html><head> <title>lang test</title>
2. <style type="text/css">
3. p:lang(fr) {color: red;}
4. </style>
5. </head><body>
6. <p lang="fr">
7. Bonjour le monde!
8. </p>
9. </body></html>

Browser Uyumu:

Internet Explorer 5.0, 5.5, 6.0, 7.0 desteklemiyor
Mozilla 1.0: destekliyor ;
Opera 7.5 ‘ 8.5 - 9.0: destekliyor

Pseudo Sınıflarını birleştirmek

CSS2.1 ile birlikte aynı seçiciye ait pseudo elemntlerini birleştirme özelliği de gelmiştir. Örneğin ziyaret edilmiş linklerin hover özelliği ile ziyaret edilmemiş linklerin hover özelliğini farklı atamak istesek

1. a:link:hover {color: red;}
2. a:visited:hover {color: pink;}

Sıralama önemli değildir.

Browser Uyumu:

Internet Explorer 5.0, 5.5, 6.0, 7.0 desteklemiyor
Mozilla 1.0: destekliyor ;
Opera 9.0: desteklemiyor

Pseudo Element Seçicileri

Bu elementler hayali elementlerdir. (X)HTML hiyerarşisi içinde bu elemntlere yoktur. CSS2.1 de Dört adet Pseudo Element Seçicisi vardır: first-letter, first-line,before ve after

first-letter (ilk harf)

Bir blok-level elementin ilk harfine stil tanımlması yapmak için kullanılır. Örnek verecek olursak h1 elementinin baş harfinin büyük olması için :

1. h1:first-letter {font-size: 200%;}
2. …
3. <h1>Bu büyük bir başlık</h1>

Browser Uyumu:

Internet Explorer 5.0, 5.5, 6.0 desteklemiyor 7.0: destekliyor ;
Netscape Navigator 6.0, 7.0: destekliyor ;
Mozilla 1.0: destekliyor ;
Opera 5.0 ‘ 6.0: destekliyor

first-line (ilk satır)

Bir metnin ilk elementine stil atamak için kullanılır. Örneğin paragraflarınızın ilk satırlarını renklendirmek isitiyorsunuz.

1. p:first-line {color: red;}

Browser Uyumu:

Internet Explorer 5.0, 5.5, 6.0,7.0 destekliyor ;
Netscape Navigator 6.0, 7.0: destekliyor ;
Mozilla 1.0: destekliyor ;
Opera 5.0 ‘ 6.0: destekliyor

before ve after elementleri

Bir elementin öncesine ve sonrasına bir içerik veya özellik eklemek için kullanılır.

Notlarımızın başına otomatik oalrak Not yazmak için

1. P.not:before { content: “Not.” }

kodu yeterlidir. Aynı şekilde paragraflarımzın sonuna otomatik bitti yazıp nokta koymak istersek

1. body:after {content: ” Bitti.”;}

yeterlidir.

Browser Uyumu:

Internet Explorer 5.0, 5.5, 6.0,7.0 desteklemiyor
Netscape Navigator 6.0, 7.0: destekliyor ;
Mozilla 1.0: destekliyor ;
Opera 7.5 ‘ 8.5: destekliyor


KAYNAK: http://bilgisayardershanesi.com/bilgisayar_dersleri/css-pseudo-siniflari.html

CSS Birimleri

Bu makalede CSS’de kullanılan tüm birimleri göreceğiz. Birimler genelde mesafe ve renkleri tanımlamak için kullanılır. Birimleri dört gruba ayıra biliriz. uzunluk birimleri,yüzde birimleri, renk birimleri ve URL birimleri

Uzunluk Birimleri

CSS’de tanımlanan 8 uzunluk birimi vardır. Bunların üç tanesi göreceli(relative) uzunluklar ve kalan beş tanesi kesin(absolute)uzunluklardır.

Göreceli Uzunluklar

Bu birimler diğer uzunluk birimlerine göre görecelidir. Sayfalarımızın ölçeğinin değiştiği ve çıktısının alındığı durumlarda bu uzunluk birimlerini kullanmamız bize avantaj sağlayacaktır.

em: Elementin fontunun yüksekliğidir. Mesela font-size değeri 14 px olarak atanmış ise 1em 14piksel eşit demektir.

ex: Elementin "x" harfinin yüksekliğidir. Atanmış olan fontun küçük "x" değeri yüksekliğidir.

px: piksel değeri. Eğer monitörünüze yeterince yakından bakarsanız, çok küçük kutulardan oluşmuş bir ızgaraya benzer. Burdaki her kutu bir pikseldir. Bu da her monitöre göre farklı değer demektir.

Kesin Uzunluklar

Bu uzunluklar gerçek hayatta kullanılan birimlerdir.

in: inç. 1 inch=2,54 cm’dir. Örn: line-height:0.5in

cm: Santimetre. Bizim gerçek hayatta kullandığımız santimetere değeridir. Örnek: margin:2cm

mm: Milimetre. Bizim gerçek hayatta kullandığımız milimetere değeridir. Örnek: letter-spacing:1mm

pt: Point. Standart baskı birimidir. (1pt = 1/72in) Örn: font-size:14pt

pc: Pika. Bir inçin altıda birine eşit olan bir baskı ölçü birimi. Bir pika 12 noktaya bölünür. Örnek: font-size:2pc

Yüzde Birimleri

Yüzde değerleri her zaman diğer elementlere göre göreceli değerlerdir.

1. /* elementin font-size değerinin %150 si dir */
2. h4 { line-height: 150% }
3. /* satır genişliğinin 10% nu */
4. p { text-indent: 10% }

Renk Birimleri

CSS’de renk değerleri isim olarak ve RGB değeri olarak tanımlanabilir. RGB tanımlamasıda dört çeşittir.

Renk İsimleri

Renklerin ingilizce isimleri kullanılarak tanımlama yapılabilir.

1. p {color:black; } /* renk tanımı siyah olarak yapılıyor*/
2. h1{ background-color: red;} /* h1 başlığının ardalanı kırmızı tanımlanıyor */

RGB Renk Değerleri

CSS’de renk tanımlamak için kullanılan asıl yöntem budur. RGB tanımlamanında dört çeşidi vardır.

#RRGGBB : Burada, RR, GG, ve BB, sırasıyla kırmızı (red), yeşil (green) ve mavi (blue) renklerin toplam renk içindeki yoğunluğunu gösteren hekzadesimal sayılardır. Örnek: color:#ff0000; (kırmızı)

#RGB: Yukardaki yöntemin kısaltmasıdır. Aynı değerleri taşıyan grup değerleri birleştirilir. Örnek: color:f00; (kırmızı)

rgb(R,G,B): Bu RGB renklerinin ondalık sayma düzeninde 0 ile 255 arasında bir tanımı vardır. Buna göre tanımlama yapılabilir. Örnek h1 {color: rgb(191,127,127);}

rgb(R%,G%,B%): Bu RGB renklerinin yüzdesel olarak %0 ile %100 arasında bir tanımı vardır. Buna göre tanımlama yapılır. Örnek: h1 {color: rgb(75%,0%,0%);}

URL Değerleri

URL tanımlaması için aşağıdaki gib bir tanımlama yapılır.

1. url("http://www.fatihhayrioglu.com/images/kucuk.gif")

Burada tırnaksız ve tek tırnaklı kullanımları da standarda uygundur.

Not : Birde bunların dışında CSS2.0 ile birlikte gelen ekstra birimlerde mevcuttur. Ancak bunlar kullanımda değildir.

Açı Değerleri : deg(derece), grad(gradyen) ve rad(radyan) Örnek: -90deg, 100grad ve 1.57rad

Zaman Değerleri: milisaniye (ms) ve saniye (s) Örnek : 100ms ve 0.1s

Frekans Değerleri : Herz(Hz) ve MegaHerz(mHz) Örnek: 10mHz


KAYNAK: http://bilgisayardershanesi.com/bilgisayar_dersleri/css-birimleri.html

CSS Doğru DOCTYPE Kullanımı

OCTYPE, HTML veya (X)HTML dökümanımızın tipini göstermek için kullandığımız bir koddur.

DOCTYPE bildirimi (X)HTML kodunun başına bir veya iki satır olarak eklenir. Genel kullanımı:

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Burada dökümanımızın XHTML 1.0 verisyonu dikkate alınarak yazıldığı ve kullanılan bu kuralların linki verilmiştir. Linkin kullanılmadığı şeklide vardır.

Bu tanımlamadan sonra web tarayıcıları bu kurallara göre sayfayı yorumlayacak ve buna göre bir görünümü kullanıcıya sunacaktır. Web tarayıcıları kullanılan Döküman tip tanımlamasına(DTD-document type definition)göre sayfayı analiz eder.

Web Sayfalarını Doğrulama "Onaylama"

Güzel bir kodlama, (X)HTML dökümanın onyalanmış halidir. Web sayfalarımız doğrulamak için genelde http://validator.w3.org/ adresi kullanılırız. Ancak bir çok web sayfası hazırlama editörü bu aracı içinde barındırır.Web sayfalarımız doğrulattığımızda sonuç olarak bize sayfamızda bir sorun varsa bunuve niçin olduğunubelirtir.

Doğrulam işlemi önemlidir çünkü bizim kodlarımızı doğru yazdığımızı kontrol eder. Kodlarınızı belirli aralıklarla doğrulmayı unutmayın. şžunu unutmayalım ki web sayfasını doğrulamamız bunu en mükemmel kod olduğu anlamına gelmez.

Web tarayıcı mod’ları

Web tarayıcı üreticileri geriye dönük uyumluluğu sağlamak için standarlara uygun tarayıcılar çıkardıklar. Bunu başardılar, bu işlem için iki mod ürettirler: standart mod(standards mode) ve garip mod(Quirks mode). Standart mod sayfa ayrıntılı olarak ve en iyi şekilde yorumlayacaktır,Garip mod da ise eski moda tarayıcılardaki gibi daha duyarsız davranacaklardır. Örneğin IE4 ve NN4 gibi.

Bu iki mod arasındaki farkı görebilemke için Windows üzerindeki IE’de kutu modeline bakmalıyız. IE6 başlangıçta Standart Mod da Kutu Modeli doğru görünürken Garip Mod da ise sorun çıkarır. IE5 ve aşağısında bu sorun vardır, ayrıca Opera 7 ve üsrü Garip Mod da IE gibi davranır. Bunun dışında ufak tefek sorunlar da vardır. Hekzedesimal renk tanımında # kullanımına ihtiyaç duymama, CSS’de değer kullanılmadığında birimi piksel olarak tanınması vb. sorunlar olarak sıralayabiliriz.

Mozilla ve Safaride bir üçüncü mod vardır, ancak Standart Mod’dan çok önemli bir farkı yoktur.

DOCTYPE Geçişleri

Web tarayıcıları DOCTYPE bildirimi ve kullanılan DTD’ye göre tarama metodunu belirler. Bişr dökümanda DOCTYPE tanımı yapılırsa bu sayfa Standart Mod da, yapılmazsa Garip Mod da yorumlanacaktır bu geçişe DOCTYPE Geçişi(DOCTYPE switching) adı verilir.

• XHTML dökümanında tam bir DOCTYPE tanımı yapıldı ise web tarayıcısı taramayı Standart Mod da yapacaktır.
• HTML 4.01 dökümanı için DOCTYPE ve strict DTD tanımı yapıldığında sayfa web tarayıcısı tarafından StandartMod da yorumlanacaktır.
• DOCTYPE ve transtional DTD URI tanımlı halin de Standart Mod da yorumlanacaktır.
• DOCTYPE ve transtional DTD URI’siz ise Garip Mod da yorumlanacaktır.
• Kötü formatlanan veya DOCTYPE kullanımılmayan dökümanlar HTML ve XHTML tarafında Garip Mod da yorumlanacaklardır.

Web tarayıcılarının DOCTYPE tiplerine göre farklılıklarını görmek için http://www.ericmeyeroncss.com/bonus/render-mode.html bir göz atın.

Çok uğraşıp en iyi ve en doğruCSS kodunu yazdıktan sonra yanlış DOCTYPE kullandığınızda sayfanız Garip Mod da yorumlanacaktır ve bu size bir çok sorun oluşturacaktır. Sitenizde tam DOCTYPE bildirimive strict DTD kullanmanız çok önelidir.

1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

Bu kullanım sayfanın HTML 4.01 kurallarının geçerli olduğu bir HTML dosyası olduğunu gösterir.

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

Bu kullanım sayfanın hem HTML hemde XHTML kurallarının geçerli olduğunu bir XHTML dosyası olduğunu gösterir.

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

Bu kullanım sayfanın sadece XHTML1.0 kurallarının geçerli olduğu bir XHTML sayfası olduğunu gösterir. Bu kodlama yapıldığıında tüm XHTML kurallarına harfiyen uyulmalıdır. Örneğin kodların hepsinin küçük harfle yazılması gibi.

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Bu kullanım sayfanın bir XHTML çerçeve(frame) sayfası olduğunu gösterir. Kullanımı azaldı.

Biz burada sizlere DOCTYPE tanımlamanın nasıl olduğunu ve önemini anlatmaya çalıştık. Bir çok HTML ediötürü DOCTYPE taınımını otomatik ekleyecektir.

KAYNAK:  http://bilgisayardershanesi.com/bilgisayar_dersleri/css-dogru-doctype-kullanimi.html

CSS Özellik Seçicileri

CSS ile tanımlama yaparken Xhtml nesnelerine erişmede bazen sıkıntı çekeriz. Ne yapsak da bu elemente atama yapsak diye bu genelde programcı - Arayüz Kod Yazarı ayrımının olduğu projelerde çok başımıza gelir. Bu sorunu kökünden çözen bir yöntemdir Özellik Seçicileri.

Javascript gibi id’si olan her elemente(hata daha fazlası da var) css özelliği atanması bize bir çok bakımdan avantaj sağlar.

Özellik Seçicileri HTML, XHTML veya XML dokümanlarındaki seçilen etiketin özelliklerine veya özellik değerlerine göre tanımlama yapmamızı sağlar. Bir örnek verecek olursak sayfamızdaki bir resme(örn: grafik.gif) kenarlık ataması yapmak istersek:

1. img[src="grafik.gif"] { border: 1px solid #000; }

Dört çeşit Özellik Seçicisi vardır.

1- Basit Özellik Seçicisi

Belirli bir etiketin özelliğine göre tanımlama yapmamızı sağlar.

1. h1[class] {color: silver;}
2. …
3. <h1 class="selam">Selam</h1>
4. <h1 class="dunya">Dünya</h1>
5. <h1 class="ben">ben geldim </h1>

2- Özellik Değeri Seçicisi

Bir etiketin özellik değerine göre tanımlama yapmamızı sağlar.

1. img[src="grafik.gif"] { border: 1px solid #000; }

3- Kısmi Özellik Değeri Seçicisi

Bir etiketin özellik değerindeki boşluklarla ayrılmış kısımlarına göre tanımlama yapmamızı sağlar.

1. a[title~="seç"] {color:#000;;}
2. …
3. <a href="google.html" title="Google seç">gooogle </a>
4. <a href="google.html" title="Yahoo seç">yahoo </a>
5. <a href="google.html" title="Fatih">fatih </a>

Türkçe karkaterde sorun çıkarmadı.

4- Dikkate Değer Özellik Seçicisi

Bir etiketin özellik değerindeki kesik çizgi(-) ile ayrılmış kısımlarına göre tanımlama yapmamızı sağlar.

1. *[lang|="en"] {color: white;}
2. …
3. <h1 lang="en">Hello!</h1>
4. <p lang="en-us">Greetings!</p>
5. <div lang="en-au">G’day!</div>
6. <p lang="fr">Bonjour!</p>
7. <h4 lang="cy-en">Jrooana!</h4>

Browser Uyumu:

Internet Explorer 5.0, 5.5, 6.0: desteklemiyor 7.0: destekliyor ;
Netscape Navigator 6.0, 7.0: destekliyor ;
Mozilla 1.0: destekliyor ;
Opera 7.0+: destekliyor

Bunların dışında CSS3 ile birlikte gelen dört tane daha yeni Özellik Seçicisi vardır. "Belirlenen Sözdizimi ile Başlayan Özellik Değer Seçicisi", "Belirlenen Sözdizimi ile Biten Özellik Değer Seçicisi", "İçinde Belirlenen Sözdizimi Geçen Özellik Değer Seçicisi" ve Aduzayı Özellik Değer Seçicisi diye 4 adet yeni Özellik Seçicisi daha vardır. Bunlara daha sonra vakti geldiğinde değineceğiz.

Kaynaklar

• http://www.blooberry.com/
• http://www.456bereastreet.com/
• http://css.maxdesign.com.au/
• http://westciv.com/
  
  
  KAYNAK :  http://bilgisayardershanesi.com/bilgisayar_dersleri/css-ozellik-secicileri.html