HTML

İlk olarak en yalın haliyle bir Select Menü (Sekme Menü) oluşturalım;

<select name="secenekler">
<option value="1" selected="selected">1. Seçenek</option>
<option value="1">2. Seçenek</option>
<option value="3">3. Seçenek</option>
<option value="4">4. Seçenek</option>
<option value="5">5. Seçenek</option>
</select>

Kodları test etmek için tıklayınız.

Yukarıda  gördünüz gibi bir sekme oluşturduk ve option ile 5 adet seçenek sunduk. <select> etiketine sadece name parametresini Kullandım. Bu etiket  <option> etiketindeki seçeneklerden hangisi seçilmiş ise onun değerini value parametresi alacılığı ile sever tabanlı bir programlama diline (PHP, ASP vb..) göndermenize ve işlenizi sağlıyor  (PHP başlığında açıklayacağım).

Name parametrisi haricinde <select> etikeinde kullanabileceğiniz bir çok parametre bulunmakta bunları kısaca açıklamak gerekirse;

• id → <select> etiketine benzersiz bir isim vermenizi sağlar (özellikle javaScript için kullanılır)
• class → CSS sınıfı tanımlamanız için kullanılır
• style → Direk CSS etiketleri girmeniz için kullanılır
• title → <select> hakkında bilgi veya başlık belirtmek için kullanılır (özellikle SEO çalışmalarına katkıda bulunur)
• lang → <select> içerisindeki verilerin dilini (lisanını) belirtmek için kullanılır
• dir → <select> listesini açmak için kullanılan buttonu (sağ taraftaki üçgen şeklindeki araç) sağa veya sola taşınmanızı sağlar
• size → Satır sayısını belirtmek için kullanılır (fakat CSS ile bu işlem çok daha başarılı bir şekilde yapıldığı için gereksizdir)
• multiple → Tek seçenek sınırlamasını kaldırarak birden fazla seçenek seçmenizi sağlar
• disabled → Select menünüzü pasif durumuna getirmek için kullanılır
• tabindex → Varsayılan seçeneği belirtmenizi sağlar.

CSS

Yukarıda 5 seçenekli sade bir Select Menü oluşturmuştuk. Şimdi bu Sekme Menüyü CSS Class oluşturarak standartların dışında farklı bir görünüme taşıyacağız.

Makalenin ilk başında bir proje üzerinde çalışırken bu konuda bir yazı yazma kararı aldım demiştim. Bahsi geçen projede ki Sekme Menüyü beraber adım adım tasarlayalım;
Buradan çalışmaya bakabilirsiniz : http://www.sabah.de/tr/sari-sayfalar

ilk olarak bir div oluşturuyoruz ve select-menu isminde bir class atıyoruz. Sonra div ‘in içine select menümüzü ekliyoruz

<div>
<select name="secenekler">
<option selected="selected" value="1">1. Seçenek</option>
<option value="1">2. Seçenek</option>
<option value="3">3. Seçenek</option>
<option value="4">4. Seçenek</option>
<option value="5">5. Seçenek</option>
</select>
</div>

ve CSS kodlarımızı yazmaya başlıyoruz;

<style type="text/css">
<!--
.select-menu{
background:url(select-background.jpg) no-repeat;
width:250px;
height:30px;
padding-left:440px;
padding-top:215px;
}
.select-menu select {
width:250px;
height:30px;
padding:5px;
padding-left:1px;
font-weight:bold;
font-size:12px;
color:#223C75;
background:#f1f1f1;
border:1px #666666 solid;
}

.select-menu select option{
padding:3px;
}
-->
</style>

Kodları test etmek için tıklayınız.

select-menu CSS klası ile <select> ve <option> etiketlerini yeniden boyutlandırdık, yazı renklerini ve boyutlarını değiştirdik ayrıca bazı ufak ayrıntılarla standart görünümünde kurtardık.

JAVASCRIPT

<select> etiketi javaScript ile en sık kullanılan HTML form öğelerindendir ve bünyesinde bir çok javaScipt olayı barındırır.

• onclick →    <select> etiketini fare (mouse) ile tıklandığında tetikler.
• ondblclick →    <select> etiketini fare (mouse) ile çift tıklandığında tetikler.
• onmousedown →    Fare (mouse) sol tuşuna basıldığında tetikler.
• onmouseup →    Basılı olan fare (mouse) tuşu bırakıldığında tetikler.
• onmouseover →    <select> etiketinin üzerine fare ile gelindiğinde tetikler.
• onmousemove →    <select> etiketinin üzerinde fare ile hareket edildiğinde tetikler.
• onmouseout →   <select> etiketinin üzerine fare ile üzerine gelinip sonra çıkıldığında tetikler.
• onkeypress →   <select> etiketinin üzerine fare ile üzerindeyken klavyeden bir tuşa basıldığında tetikler.
• onkeydown →    <select> etiketinin üzerindeyken klavyeden bir tuşa ilk basıldığı anda tetikler.
• onkeyup →   <select> etiketinin üzerindeyken basılı olan klavye tuşu bırakıldığında tetikler.
• onfocus →   <select> etiketi seçildiğinde (odaklanıldığında) tetikler.
• onblur →    select> etiketi seçilip başka bir işleme geçildiğinde tetikler.
• onchange →   select> etiketi içeriği değiştiğinde tetikler.

Şimdi onChange olayını kullanarak select menümüzü harekete geçirelim;

<div>
<form method="post">
<select name="secenekler" onChange="submit();">
<option selected="selected" value="1">1. Seçenek</option>
<option value="1">2. Seçenek</option>
<option value="3">3. Seçenek</option>
<option value="4">4. Seçenek</option>
<option value="5">5. Seçenek</option>
</select>
</form>
</div>

Kodları test etmek için tıklayınız.

javaScript submit fonksiyonunu onChange olayı ile kullanarak select menüde bir değişiklik olduğunda form ‘u sanki submit buttonuna tıklamış gibi hareket ettirmiş olduk.

PHP

HTML bölümünde bahsettiğim gibi <select> etiketine name parametresi ile secenekler adında bir değişken atamıştık şimdi PHP kodları ile secenekler ‘den gelen bilgiyi ekrana yazdıralım;

<?php
$secenek = $_POST['secenekler'];
echo '<br />az önce <strong>' . $secenek . '</strong> numarali seçeneği seçtiniz...<br /><br />';
?>

Kodları test etmek için tıklayınız.

Formumuzu post metodu ile gönderdiğimiz için PHP $_POST fonksiyonu ile formdan gelen bilgiyi alıp ekrana yazdırıyoruz.

OPTFROUP

Select etiketini herşeyiyle bahsetmişken son olarak optgroup ‘dan da bahsederek bu konuyu bitirelim. optgroup select menünüzdeki option listenizi gruplara ayırmaya yarayan çok kullanışlı bir HTML etiketidir.

Optgroup kullanım şekli;

<div>
<form method="post" name="ornekForm">
<select name="secenekler" onChange="submit();">
<optgroup label="Seçenekler">
<option selected="selected" value="1">1. Seçenek</option>
<option value="1">2. Seçenek</option>
<option value="3">3. Seçenek</option>
<option value="4">4. Seçenek</option>
<option value="5">5. Seçenek</option>
</optgroup>
<optgroup label="Diğer Seçenekler">
<option value="6">6. Seçenek</option>
<option value="7">7. Seçenek</option>
<option value="8">8. Seçenek</option>
<option value="9">9. Seçenek</option>
<option value="10">10. Seçenek</option>
</optgroup>
</select>
</form>
</div>

Kodları test etmek için tıklayınız.

Kodları test ettiğinizde listenin seçenekler ve Diğer Seçenekler adında iki gruba ayrıldığını göreceksiniz.

Sanırım <select> etiketi hakkında bahsedilecek başka bir konu kalmadı.

Makalede geçen örneklerin hepsini aşağıdan bilgisayarınıza indirerek inceleyebilirsiniz.
Download : Select-kullanimi.zip (136)

Ayrıca W3 orjinal sitesinden <select> hakkında kurumsal bilgi edinebilirsiniz.
http://www.w3schools.com/tags/tag_select.asp

Bu link modelinin kullanım amacı aynı içeriğe sahip veya birbirine çok benzer içeriğe sahip sayfalarınız varsa Google ‘a tek bir sayfa teklif etmenize imkan tanırsınız.

Örneğin bir  haber siteniz var ve iki farklı link sistemi kullanıyorsunuz.

http://www.habersitesi.com/index.php?haberID=387

http://www.habersitesi.com/tarifik-kazasi-yine-can-aldi.html

Eğer her iki linkte aynı sayfayı gösteriyorsa ve siz Seo uyumlu ikinci linkin Google tarafından indexlenmiesini istiyorsanız bu iki sayfanın <head></head> tagları arasına aşağıdaki gibi bir teklifte bununabilirsiniz.

<link rel=”canonical” href=”http://www.habersitesi.com/tarifik-kazasi-yine-can-aldi.html” />

Bu şekilde Google ‘a benzer iki sayfadan birini seçip indexlemesi için bir teklifte bulunmuş olursunuz. Özellikle Teklif kelimesi kullandım çünkü bu işlem bir direktif değildir yani Google önerinizi dikkate alır fakat uygulayıp uygulamayacağına kendisi karar verir.

Peki bu işlemin amaçı nedir?

“Ne kadar çok link indexlerinirse o kadar iyidir” şeklinde yanlış bilinen bir düşünce var. Aslında gerekli linklerinizin indexlenmesi daha önemlidir. Google haddinden fazla gereksiz linkleri elemeye çalışıyor aynı içeriğe sahip siteleri ve sayfaları arama sıralamasında aşağılara çekerek cezalandırıyor. Siz rel=”canonical” kullanarak yaptığınız bir Seo calışmasın da hem Google ‘la yardımcı olmuş olursunuz hemde sizin tarafınızdan belirlenen bağlantıya önem verdirerek arama sonuçlarında üst sıralara çıkmasını sağlamış olursunuz.

Hangi durumlarda kullanabilirim?

• Öncelikle yukarıda anlattığım gibi aynı içeriğe sahip fakat farklı link yapıları olan sayfalarınızda.
• İkinci olarak listeleme sayfalarında kullanabilirsiniz. Örneğin bir alışveriş sitesi olduğunu düşünün ve bir sayfada ürünleri fiyatına göre listeliyorsunuz, diğer bir sayfada da alfabetik olarak ismine göre listelediğinizi düşünün. Bu gibi durumlarda tercih ettiğiniz bir sıralama sayfasını rel=”canonical” parametresi ile Google ‘a bildirebilirsiniz.
• Bir diğer kullanım alanıda son derece birbirine benzeyen iki sayfanız varsa veya bir sayfa da  konu birkaç satır bilgi ve başka bir sayfada konu daha detaylı anlatılıyorsa. Detaylı sayfayı Google ‘a teklifedebilirsiniz.

Farklı kullanım gereksinimleride ihtiyacınıza göre çıkabilir örneğin başka bir domaini bile Standart Sayfa olarak belirleyebilirsiniz. Fakat dikkat etmeniz gereken husus şudur ki;   rel=”canonical” parametresi ile belirleğiniz link Google tarafından daha çok önemsenir ve indexlenir. Eğer bir başka domain linkini verirseniz sizin domaindeki link değil Standart Sayfa linki öncelikli olup indexlenecektir. Tavsiyem linkleri özenle seçmeniz ve gerekli durumlarda kullanmız.

Özetlemek gerekirse başlıca amaç iki benzer içeriğe sahip sayfayı  Google farkettiğinde zaten birini seçip indexliyor ve diğerini yok ediyor. Ayrıca bezer içerik olduğu için cezalandırıp arama sonuçlarında aşağılara cekebiliyor. rel=”canonical” parametresi ile benzer içirikli sayfaları hangisinin gösterileceğini Google değil siz seçmiş oluyorsunuz.

Standart Sayfa (Canonical page) ile ilgili Google Orjinal videosunu ve dökümanını buradan inceleyebilirsiniz.

Geçici çözümler için kullanabileceğiniz tüm Türkçe Ascii kodlarını aşağıdaki tabloda yeralmaktadır.

Ayrıca işinize yarayacağını düşündüğüm bazı karakter kodlarına aşağıdaki listeden ulaşabilirsiniz;

Orjinal olarak numaratik kodlar kullanılsa da sonrada akılda kalması daha kolay olması için Friendly kodlar üretilmiştir. Friendly veya numarasal (sayısal) kullanım yöntemi arasında hiçbir fark yoktur her iki yöntemlede aynı sonucu alırsınız.

Aslında çok geniş çaplı bir hizmet sayılmaz ama olabildiğince pratik olduğu kesin.

Peki nedir bu servis? ne işe yarar derseniz; Url ‘sini yazdığımız sitenin favicon ‘nunu Png formatında almamızı sağlıyor.

Hemen örnek bir link yazalım;

http://www.google.com/s2/favicons?domain=www.facebook.com

Yukarıdaki linke tıkladığınızda veya kopyalayıp tarayıcınızın adres satırına yapıştırdığınızda ekranda facebook.com ‘com favicon ‘unu göreceksiniz. Oldukça pratik olduğunu söylemiştim yapmanız gereken tek şey url ‘nin sonunda yazan domanin değişkenine bir  değer vermeniz.

http://www.google.com/s2/favicons?domain=www.herhangibirsite.com

Yazdığınız url ‘ye ait favicon.ico dosyasını 16×16 ebatlarında Png formatına çevirip bizlere sunulan bu datayı nasıl daha etkili kulanırız derseniz örneği sitenizde linkler isminde bir kategori var ve siz bazı sitelere link veriyorsunuz;

<h3>Linkler</h3>

<a href="http://www.flashcentury.net">
<img style="vertical-align: middle; border:0;" src="http://www.google.com/s2/favicons?domain=www.flashcentury.net" alt="flashcentury.net" />
Flashcentury.net</a>
<br />

<a href="http://www.google.com">
<img style="vertical-align: middle; border:0;" src="http://www.google.com/s2/favicons?domain=www.google.com" alt="Google.com" />
Google.com</a>
<br />

<a href="http://www.facebook.com">
<img style="vertical-align: middle; border:0;" src="http://www.google.com/s2/favicons?domain=www.facebook.com" alt="Google.com" />
Facebook.com</a>

Yukarıdaki kodun çıktısı şu şekilde olacaktır;

Linkler

Flashcentury.net

Google.com

Facebook.com

işte bu kadar basit. En yalın haliyle incelemek isterseniz resim ekleme kodarınız şu şekilde olmalı

<img src="http://www.google.com/s2/favicons?domain=www.flashcentury.net"  />

www.flashcentury.net yazan kısmı icon ‘unu göstermek istediğiniz sitenin url ‘si ile değiştirmeniz yeterli.

Az öncede yazdığım gibi web sayfasında benim tabirimle bir çatı görevi taşır, sayfa öğerleri html olarak yerleştirilir ve eğer dinamik bir işlem gerekiyorsa browser (Tarayıcı) işlemleri için javacript, vbscript vb.. server tabanli işlemler için Php, Asp, Python, jsp vb.. gibi kodlama dilleriyle desteklenir. Eğer bir site sadece HTML kodlarından oluşacaksa bu site büyük bir ihtimalle sadece sunum amaçlı bir site olabilir ki günümüzde sadece html ‘den ibaret bir site çok nadir kullanılmaktadır. Son olarak HTML dosyaları .html veya .htm uzantılarına sahiptir. Bu iki uzantı arasında hiç bir fark yoktur fakat genellikle .html uzantısı kullanılmaktadır.

HTML hakkında bu kadar bilgiden sonra şimdi XHTML ‘ye geçebiliriz. Aslında XHTML 2000 yılında W3C tarafından kabul edilmiş tüm internet tarayıcıları ve Gsm Telefonları tarafından standart olarak kabul edilmiştir. HTML biraz daha derlenip, geliştirilip ve belli bir standarta geçirilip XHTML olmuşturulmuştur. XHTML kullanmanın en temel amaçlarından birisi farklı tarayıcılarda sorun çıkarmamasıdır, bunun yanında tarayılar kodu daha çabuk algılar ve web sayfası HTML ‘ya göre daha hızlı çalışır. Bir diğer avantajı ise başta Google olamak üzere başlıca arama motorları XHTML standarlarına uygun yazılmış siteye tam not veriller ve arama motorlarında kötü kodlanmış rakip sitelere göre üst sıralara yükselir.

XHTML Extensible Hyper Text Markup Language , Türkçe karşılığı Esnetilebilir Hareketli Metin İşaretleme Dili anlamındadır. Her ne kadar Esnetilebilir denilsede bu esneklik kodlayan programcılar değil XHTML ‘yi geliştiren programcılar için geçerli olduğunu düşünüyorum zira XML yapısında var olan söz dizimi ifadelerini bünyesine alan bir dildir. XML ’de var olan sıkı ve uyulması gereken şartlar XHTML ‘de de geçerlidir. Bu doğrultuda XML ’de olan extensible ifadesini bünyesine almıştır.

XHTML kodlama mantığı?
İlk olarak bilmeniz gereken şey XHTML hiyerarşik bir yapıya sahiptir kodlar birbirlerini kapsarlar.

Örneğin ;
<html>
<body>
<div>Merhaba Dünya</div>
</body>
</html>

Ayrıca yukarıdaki örnektede farkettiğiniz üzere <….> şeklinde taglar açılır ve kesinlikle kapatılması gerekmektedir. Kapatılırken de </…..> şeklinde kapatılır.

Bilmeniz gereken bir diğer önemli husus ise XHTML tagları iki ana bölümden oluşur bunlar <head> ve <body> taglarıdır.

Head -> Sayfanın bilgilerini tarayıcıya, arama motorlarına bildirir ve gerekli Css veya js kodlarını import eder. Örneğin site başlığı, arama motorları için taglar, dil ayarları, gibi bilgiler bu alana yazılır ve Head bölümüne yazılan kadlar ziyaretçi tarafından görülmez.

Body -> Bu bölüm ise ziyaretçinin gördüğü bölümdür, sayfanın içeriği bu alana yazılır.

Şimdi en sade haliyle bir XHTML kodu yazalım;

<html>
<head></head>
<body></body>
</html>

Herhangi bir editörle hatta her bilgisayar da yeralan text editor ile bile bu kodu yazıp .html olarak kaydedebilirsiniz. Yukarıdaki kod bir XHTML dosyasının en yalın halidir.

Şimdi biraz dosyamızın içine birşeyler ekliyelim;

<html>
<head>
<title>İlk Deneme</title>
</head>
<body>
Merhaba Dünya
</body>
</html>

Yukarıdaki örnekte Head bölümüne <title> Tag ‘ı ile sitenin başlığını (İlk Deneme) yazdık ve sonra Body Tagları arasına Merhaba Dünya yazarak içeriğimizi eklemiş olduk. Bu kodu .html olarak kaydedip açtığınızda ekranda Merhaba Dünya yazacak, tarayıcının en üst sol kısmında ise sitenin başlığı olan İlk Deneme yazısını göreceksiniz.

Umarım XHML kodlama mantığını kavramışsınızdır. İlerleyen derlerimizde XHTML taglarını ve ne şekilde kullanıldığını bol bol anlatacağım. XHTML oldukça kolay bir programlama dilidir ve web tasarım için en temel unsurlardan biridir.

Bir sonraki dersimizde görüşmek üzere…

Bir önceki dersimizde XHLML Nedir başlığı altında bu konuya giriş yaptık ve şimdi dilerseniz HTML ve XHTML arasındaki farkları inceleyelim.

Öncelikle şu nu söyleyeyim, eğer daha önceden HTML biliyorsanız XHTML sizi fazla yormayacak aslında hemen hemen aynı taglar kullanılmaktadır fakat bir önceki derstede bahsettiğim gibi XHTML ‘nin belli başlı standartları ve uyulması gereken şartları vardır. Şimdi bu farklılıkları şıklar halinde yazacağım;

1. Küçük harf kullanımı : Normal HTML ‘de büyük yada küçük harf hiç farketmiyordu, bu konuda hiçbir kural yoktu fakat XHTML özellikle küçük harf konusunda çok titiz.

HTML
<BODY>
<div WIDTH=”100%”>Merhaba Dünya</div>
</BODY>

XHTML
<body>
<div width=”100%”>Merhaba Dünya</div>
</body>

2. Parametrelerde küçük harf ile yazılmalıdır : Yukarıda bahsettiğim şıkka ek olarak parametrelerde bir standarta baglanmıştır.

HTML
<BODY>
<div>Merhaba Dünya</div>
</BODY>

XHTML
<body>
<div>Merhaba Dünya</div>
</body>

3. Düzgün hiyerarşi : Açılan taglar sırası ile kapatılmalıdır.

HTML
<strong><div>Merhaba Dünya</strong></div>

XHTML
<div><strong>Merhaba Dünya</strong><div>

4. Kapalı taglar : Tüm taglar kapatılmalıdır. Örneğin bazı taglar tek başına kullanılır (br , hr, img) bu taglarda XHTML ‘de kapatılmalıdır.

HTML
<br>
<hr>
<image href=”resim.gif”>

XHTML
<br />
<hr />
<image href=”resim.gif” title=”Flashcentury” />

5. Kapatılan taglara / işaretinden önce boşluk bırakmak : Yukarıdaki şıkla bahsettiğim tagları kapatırken / işaretinden önce bir boşluk bırakmanız gerekmektedir. Bu tarayıcılar ve arama motorları tarafından kabul edilmiş bir standarttır.

Yanlış Kullanım
<br/>
<hr/>
<image href=”resim.gif” title=”Flashcentury”/>

Doğru kullanım
<br />
<hr />
<image href=”resim.gif” title=”Flashcentury” />

6. Link ve Resim eklerken bir başlık girilmelidir : Özellikle arama motorları için ve standartlar uymak için bunu yapmanız gerekmektedir. title parametresi ile resim veya link hakkında tarayıcıya bilgi vermemiz gerekmektedir.

HTML
<image href=”resim.gif”>
<a href=”http://www.flashcentury.net“>

XHTML
<image href=”resim.gif”>
<image href=”resim.gif” title=”Flashcentury” />
<a href=”http://www.flashcentury.net” title=”Flashcentury” />

7. Parametreler tırnak içinde olmalıdır : HTML ‘ de bu konuda bir şart yoktu tırnak için ve tırnak içinde kullanmadan parametre değerleri verilebiliyordu.

HTML
<BODY>
<div width=100%>Merhaba Dünya</div>
</BODY>

XHTML
<body>
<div width=”100%”>Merhaba Dünya</div>
</body>

8. Parametrelerde sadeleştirme : Özellikle Form parametrlerinde bazı kolaylıklar vardı, örneğin checked parametresini kullanarak bir radio buttonu seçili hale getirebiliyorduk ama malesef XHTML ‘de bu olay kaldırıldı.

HTML
<input type=”radio” checked>
<option selected>

XHTML
<input type=”radio” checked=”checked” />
<option selected=”selected” />

9. Name parametresi yerine id Parametresi kullanimi : HTML döneminde taglara isim verirken Name parametresi kullaniliyordu, Id parametresi ise ikinci bir olasilik veya javascript ağırlıklıydı fakat XHTML genel tanımlamada Id parametresini kullanmamızı istiyor.

HTML
<div name=”mesaj”>Merhaba Dünya</div>
<image name=”resim” href=”resim.gif”>

XHTML
<div id=”mesaj”>Merhaba Dünya</div>
<image id=”resim” href=”resim.gif” />

10. DOCTYPE bildirimi : HTML kodlarından önce daha doğrusu kodlamanın ilk başına DOCTYPE (DTD ) bir başka değişle HTML dokumanımızın çeşitini bildirmemiz gerekiyor. Bu konuyla daha ayrıntılı bilgiye buradan ulaşabilirsiniz.

HTML
<html>
<head>
<title> HTML Dökümanı</title>
<body>
<div>Merhaba Dünya</div>
</body>
</html>

XHTML
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html>
<head>
<title> HTML Dökümanı</title>
<body>
<div>Merhaba Dünya</div>
</body>
</html>

Eğer standart bir XHTML kodlaması yapacaksanız genel kullanımı yukarıdaki gibidir ve tüm XHTML sayfalarınızın ilk satırına bu kodu ekleyebilirsiniz fakat bazen sayfanızı frameler ile veya farklı türlerde yapmanız gerekebilir, DTD bildimi ile kodlamanızın çeşidini tanımlarsınız ve tarayıcılara yardımcı olursunuz. DOCTYPE ile ilgili yazıma buradan ulaşabilirsiniz.

HTML ‘den XHTML ‘ye geçen veya bu işe yeni başlamış arkadaşlar için dikkat etmesi gereken en önemli gördüğüm 10 maddeyi ekledim, ilerleyen derslerde yeri geldikçe yine bazı ayrıntılardan bahsedeceğim.

Hazırladığınız siteyi birde Internet Explorer, Firefox, Opera, Safari, Chrome gibi tarayılarda sorunsuz calışması için emek harcarız. Hadi bakalım tam hersey bitti site hazır derken birde farklı versiyonlarda site nasıl çalışacak sıkıntısı karşımıza çıkar. Internet Explorer ‘da bu konuda olabildiğince acımasızdır, bir versiyonda sorunsuz çalışan site diğer versiyonda içler acısıdır.

Özellikle Internet Explorer 6 çok sorunlu bir tarayıcıdır bir çok Css ve Js kodu sorunlu çalışır hatta bazı kodlar hiç reaksiyon göstermez. Şu an en son versiyon Internet Explorer 8 olmasına ramen hala Internet Explorer 6 kullanan bir çok bilinçsiz internet kullanıcısı var bu sebeple hala sitenizin Internet nasıl çalıştığını kontrol etmelisiniz. Internet Explorer 6 ‘dan sonraki versiyonlar biraz (az biraz) daha sorunsuz diyebiliriz .

Tam anlamıyla farklı tarayıcı uyumu sorununa bir çözüm olmasada en azından Internet Explorer 6 kullananları azaltma için bir çözümden bahsedeceğim..

• ilk olrak buradaki zip dosyasını bilgisayarınıza indiriniz.
• İndirdiğiniz zip dosyasını açtığınızda bir örnek html dosyası (example.html), ie6update klasörğ içinde ie6update.js isimli bir Javascript dosyası olduğunu göreceksiniz. Ayrıca resim ve resimlerin kaynak dosyasını psd formatında eklenmiştir.
• Tahmin ettiğiniz gibi bu bir jQuery eklentisi. example.html dosyasının kaynak kodlarını incelerseniz bu eklentinin ne sekilde calistiğini çok rahat görebilirsiniz.

Fakat yinede kodları bir gözden geçirelim ;

ilk önce tarayıcının Internet Explorer 6 olup olmadığını kontrol ediyoruz

<!--[if IE 6]>

Eğer tarayıcı Internet Explorer 6 ise jQuery ‘i Googlelaps üzerinden çağırıyoruz.

if(typeof jQuery == 'undefined'){
document.write("<script type=\"text/javascript\"  src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js\"></"+"script>");
var __noconflict = true;
} 

Sonra IE6UPDATE_OPTIONS değişkenine açılacak popupta kullanılacak resim dosyalarımızın yolunu bildiriyoruz.

var IE6UPDATE_OPTIONS = {
icons_path: "ie6update/images/"
}

jQuery çağırırken açtığımız <script> etiketini kapatıp

</script>

Son olarak ie6update.js dosyamızı çağırıyoruz ve gizli if sorgumuzu kapatıyoruz..

<script type="text/javascript" src="ie6update/ie6update.js"></script>
<![endif] >

İşte bu kadar. Artık ziyaretçileriniz sitenize girdiğinde eğer Internet Explorer 6 kullanıyorsa bir uyarı penceresi çıkacak ve Internet Explorer ‘ın yeni versiyonu çıktını bildirip update etmesini isteyecek…

Tarayıcı ve tarayıcı versiyonu uyuşmazlık soruna ne zaman tam anlamıyla bir çözüm bulunur bilmem ama en azından bizim gayretimizle eski versiyon kullanan bilinçsiz ziyaretçi sayısını azaltabiliriz.

Bir sonraki makalede görüşmek üzere
Hüseyin Koçak

Bir önceki makalemde browser uyumsuzluğu hakkındaki sorundan bahsetmiştim ama ağırlıklı olrak Internet Explorer 6 (eski versiyonları) için bir çözümden bahsetmiştim fakat şimdide son versiyon olan 8 için geçici bir çözümden bahsetmek istiyorum;

Eğer sitenizi Internet Explorer 7 ‘ye uygun hazırlamışsanız ve yeni versiyonda sorunlu gözüküyorsa aşağıdaki meta tag ‘ları sayfanızın <head> ve </head> tagları arasına yerleştiriniz.

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

Bu sayede ziyeretçiniz Internet Explorer 8 kullanıyor bile olsa, sanki Internet Explorer 7 kullanıyor gibi kodlar yorumlanır ve siteniz yeni versiyonda sorunsuz çalışır.

Evet tam anlamıyla bir çözüm olmasada eğer benim gibi zaman sıkıntısı yaşıyorsanız veya Internet Explorer 8 kullanıcısı belli bir sayıya artınca siteyi yeni versiyona göre düzenlerim gibi bir düşünceye sahipseniz yuradaki meta kodları sorununuzu çözecektir.

Ayrıca bu kodu daha eski versiyonlar içinde entegre edebilirsiniz. Bunun için content parametresine uygun browser ‘i yazmanız yeterli.

Örneğin ;

content="IE=EmulateIE8" --> Internet Explorer 8
content="IE=EmulateIE7" --> Internet Explorer 7
content="IE=EmulateIE6" --> Internet Explorer 6

veya

content="IE=7.5" --> Internet Explorer 7.5
content="IE=6" --> Internet Explorer 6
content="IE=5" --> Internet Explorer 5


Ayrıca aşağıdaki parametre ile mevcut olan en son sürümü hedefleyebilirsiniz

content="IE=Edge" --> En son sürüm

Eğer Server size aitse ve tüm sitelere birden uygulamak istiyorsanız web.config dosyanıza aşağıdaki kodları uygulayabilirsiniz (Tavsiye edilmez)

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <httpProtocol>
      <customHeaders>
        <clear />
        <add name="X-UA-Compatible" value="IE=EmulateIE7" />
      </customHeaders>
    </httpProtocol>
  </system.webServer>
</configuration>

Bu konuda daha ayrıntılı bilgiye Microsoftun resmi sitesinden alabilirsiniz.

Bazen ziyeretcinizin browserini kontrol edip kullanılar tarayıcıya veya versiyonuna göre kodlar kullanmak veya sayfayı bazı uyarılar yazdırmak isteyebilirsiniz. Hatta yukarıdaki bahsetmiş olduğum kodları ilk önce ziyaretcinin tarayıcı versiyonunu kontrol edip eğer gerekirse uygulamak isterseniz aşağıdaki kodları kullanarı kullanarak ziyaretcinizin tarayıcısını kontrol edebilirsiniz.

<!--[if IE]><p>Internet Explorer kullanıyorsunuz.</p><![endif]-->
<![if !IE]><p>Internet Explorer kullanmıyorsunuz.</p><![endif]>

<!--[if IE 7]><p>Internet Explorer 7 Kullanıyorsunuz</p><![endif]-->
<!--[if !(IE 7)]><p>Internet Explorer 7 Kullanmıyorsunuz</p><![endif]-->

<!--[if gte IE 7]><p>Internet Explorer 7 den daha yüksek bir versiyon kullanıyorsunuz</p><![endif]-->
<!--[if lt IE 7]><p>Internet Explorer 7 den daha düşük bir versiyon kullanıyorsunuz</p><![endif]-->
<!--[if (gte IE 5.5)&(lt IE 7)]><p>Internet Explorer 7 ve Internet Explorer 5.5. arasında bir versiyon kullanıyorsunuz</p><![endif]-->

Evet yukarıdaki kodlar birçok alanda browser uyumu sorunlarınızı çözme yardımcı olabilir özellikle css kodlarında. Örneğin Firefox için ayrı Internet Explorer için ayrı css kodları yazabilirsiniz.

Son olarak ; Farzedelimki Internet Explorer 7 uyumlu bir sitemiz var ve eğer ziyeretçimiz daha yüksek bir versiyon kullanıyorsa makalenin ilk başında bahsetiğim meta tagları uygulayarak Internet explorer 7 ‘ye uyumlu olmasını fakat daha eski bir versiyon kullanıyorsa yeni versiyonu yüklemesine teşvik etmek istiyoruz.

<!--[if gte IE 7]>
/*Versiyon Internet Explorer 7 den yüksekse uyzmlu hale getiriyoruz*/
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<![endif]-->

<!--[if lt IE 7]>
/*Versiyon Internet Explorer 7 den düşükse bir önceki makalemde bahsettiğim jquery 'nin i.e update pluginini kullanarak versiyonu yükseltmeye teşvik ediyoruz*/
<script type="text/javascript">
	/*Jqueryi yüklüyoruz*/ if(typeof jQuery == 'undefined'){ document.write("<script type=\"text/javascript\"   src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js\"></"+"script>"); var __noconflict = true; }
	var IE6UPDATE_OPTIONS = {
		icons_path: "http://static.ie6update.com/hosted/ie6update/images/"
	}
</script>
<script type="text/javascript" src="http://static.ie6update.com/hosted/ie6update/ie6update.js"></script>
<![endif]-->

Yukarıda yaydığım kodlarda eğer versiyon Internet Explorer 7 ‘den küçükse Jquery ‘nin Install IE6 Update plugini yardımıyla yeni versiyonunu yüklettik. Bu konuda daha ayrıntı bilgi için bir önceki makalemi okuyabilirsiniz.

Bir sonraki makalede görüşmek üzere…
Hüseyin Koçak

————————————————————————————————————————————————————–
Bu yazı “Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany” linsansı ile korunmaktadır.

Internet Explorer 8 için önceki versiyonlara uyunluluk çözümü by Flashcentury is licensed under a Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
Based on a work at www.flashcentury.net.
Permissions beyond the scope of this license may be available at http://www.flashcentury.net/index.php/ajax-dersleri/internet-explorer-8-icin-onceki-versiyonlara-uyunluluk-cozumu.html.

Yeni versiyonda <header>  <footer> <nav> <canvas> <video> <audio> <progress> gibi harika yeni özellikler gelirken. Uzun zamandır yerini Css ‘ye bırakmış olan <center>, <font> gibi özellikler kaldırılmış.

Yeni Kodların Bağzılarını inceliyelim :

• canvas : Bence Html 5 ‘in en muhteşem özelliği. sayfada bir alan oluşturur ve bu alana Javascript yardımıyla bir proğramı html dosyanızın içine alabiliyorsunuz.

Örnek : canvaspaint.org (paint uygulaması)
Örnek : Inanılmaz bir 3D tetris oyunu

• video : Bu tag ile video dosyalarınızı cağırıp zahmetsizce videolarınızı ziyaretcilerine izletebilirsiniz.
  örnek için buraya tıklaynız.
• audio : Müzik dosyalarınızı yayınlamak için player oluşturur.
• header : Üst alan oluşturur. (Css ile uzun saatler alan ayarlamalardan kurtarır)
• footer : Alt alan oluşturur.
• nav : Menu gibi kolonlar oluşturur.
• geolocation : Ziyaretcinizin harita üzerindeki konumunu belirlemek için.
  örnekler için buraya ve buraya bakabilirsiniz.
• postMessages : Tarayıcıya mesaj göndermenizi sağlar.
  örnek için buraya tıklayınız.
• drag&Drop : Sürükle bırak özelliği.
  örnek için buraya ve buraya tıklayınız.
• drag Anything : Sayfa içindeki elemetleri sürükleyip başka bir elementin içerisine koyabiliyoruz.
  örnek için buraya tıklayınız.

Süper değilmi Şimdi sıra kötü haberde ; malesef internet explorer Html 5 ‘i şimdilik desteklemiyor, Microsoftun bu tutmu sayesinde neredeyse bütün web proramcılarını İnternet Explorer ve Microsoft ‘tan nefret ettirdi. Html ‘i kullanmak için iki seçenek var ya Sadece Firefox, opera, safari tarayıcısına sahip internet kullanıcılarını hedefleyip inernet Explorer ‘i görardı edeceğiz yada Microsof ‘tu bekleyip belki Internte Explorer 9 versiyonunda Html 5 desteği verir deyip umut edeceğiz. Yani kısacası bekleyeceğiz.

Html 5 ile ilgili yeri geldikçe makaleler yazıp nasıl kullanıldığı hakkındaki bilgilerimi sizlele paylaşacağım fakat bu konuda daha çok bilgi alamak için aşağıdaki bağlantıları ziyaret edebilirsiniz.

- w3.org Html 5 Resmi Sitesi.
- Html 4 ve Html 5 arasındaki farklar.
- Html 5 Parametreleri.
- Html 5 Reference