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

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.

RSS nedir?
RSS yani orjinal açılımı ile Rich Site Summary (Zengin Site Özeti) kelimelerin baş harflerinden oluşur. RSS ‘nin kullanım amacı site ziyaretçilerinin içeriğinizi daha rahat takip etmesi ve bazı sosyal ağlar da (örneğin facebook, friendfeed, twitter) içerinizi rahatlıkla yayınlamanızı sağlar. Xml formatlı RSS dosyalarının uzantları .Rss veya .xml olabilir fakat biraz sonra yapacağımız örnekte .php olarak kullanacağız.

İlk Örneğimiz

RSS dosyası iki ana bölümden oluşuyor, birincisi dosyamızı tanımladığımız üst kısım ve ikinci olarak içeriğimizin sıralanacağı alt item kısmı. Statik olarak bir Rss dosyası aşağıdaki gibidir…

<?xml version=\"1.0\" encoding=\"UTF-8\"?>
<rss version=\"2.0\">
<channel>
<title>Rss beslememizin Basliği</title>
<link>http://www.sitemiz.de/</link>
<description>Ress Beslemesı Acıklama</description>
<language>de-de</language>
<copyright>copyright Flashcentury.de</copyright>
<webMaster>info@flashcentury.de</webMaster>

<item>
<title>baslik</title>
<link>link</link>
<pubDate>Tarih</pubDate>
<description>içerik</description>
</item>

</channel>
</rss>

Gördüğünüz gibi xml ve ardından Rss etiketleri ile dosyamızı başlattık ve Rss beslemesi hakkında genel bilgileri verdik ardından item etiketi altında içeriğimizi sunduk. Bu örnekte bir item var fakat 10-20 arası item ekleyebiliriz.

Dinamik RSS dosyamızı oluşturuyoruz

Evet şimdi geldik dinamik olarak nasil RSS oluşturacağımıza. Hemen başlayalım ;

include 'sqlbaglantimiz.php'
header("Content-type: text/xml\n\n");

echo "<?xml version=\"1.0\" encoding=\"UTF-8\"?>
<rss version=\"2.0\">
<channel>
<title>Neu-Handys</title>
<link>http://www.flashcentury.de/</link>
<description>Ress Beslemesı Acıklama</description>
<language>de-de</language>
<copyright>copyright Flashcentury.de</copyright>
<webMaster>info@flashcentury.de</webMaster>
";

$rssSql = mysql_query("SELECT * FROM tablo order by id desc limit 20");
while($rss = mysql_fetch_assoc($rssSql)) {

echo "
<item>
<title>$rss[baslık]</title>
<link>$rss[link]</link>
<pubDate>$rss[tarih]</pubDate>
<description>$rss[ıcerik]</description>
<category>$rss[kategorı]</category>
</item>
";
}

echo "
</channel>
</rss>";
?>

Yukarıdaki örnekte bir Sql bağlantısı yaptığınızı farzediyorum ve bunu “sqlbaglantimiz.php” dosyasını include ederek dosyamıza dahil ediyoruz.
Sonrasında dikkat etmemiz gereken en önemli hususlardan biri ise ikinci satırda yeralan kodumuz yani ;

header(“Content-type: text/xml\n\n”);

header fonksiyonu ile Php dosyamızın bir xml olduğunu sunucuya bildiriyoruz. Aslında kilit kod budur aksi taktirde Rss reader ve tarayıcınız Php dosyası olduğunu kabul eder ve RSS çalışmaz.

Sonrasında statik Xml kodlarımızı yazdık ve RSS sunumumuz hakkında bilgiler verdik

MySql bağlantımızı yaptığımızı farzederek içeriğimizi yayınlamak istediğimiz MySql tablomuza bağlanıp bir döngü oluşturuyoruz ve döngü içerisine item veya içeriklerimizi sıralatıyoruz. Burada dikkat etmeniz gereken şey itemlar en fazla 20 tane olmalıdır aksi taktirde RSS dosyanız çalışmaz.

Canlı bir RSS örneği görmek isterseniz son hazırladığım sitelerden biri olan Cepnet.de ‘yi inceleyebilirsiniz. Eğer Firefox kullanıyorsanız Adres satırının sağında turuncu RSS iconunu göreceksiniz tıkladığınızda iki adet dinamik RSS sizi bekliyor olacak

veya şu adreslerden direk ulaşabilirsiniz
http://www.cepnet.de/media/rss/rss-Top-Handys.php
http://www.cepnet.de/media/rss/rss-Neu-Handys.php

RSS dosyamızı nasıl HTML içene dahil edeceğiz
evet RSS dosyamız hazır ise son olarak html kodlarımız içerisine dahil etmemiz gerekiyor.

<link rel=”alternate” type=”application/rss+xml” href=”rss_dosyamiz.php” title=”Rss baslık” />

Yukarıdaki kodlarla Tarayıcıya bu sitede bir Rss olduğunu bildiriyoruz.

Basit bir RSS dosyasını nasıl dinamik oluşturacağımızı anlattım fakat RSS dosyamizin içerisine daha başka içerikler (örneğin Resim, html kodları) ekleyebilir daha zengin bir sunum yapabiliriz. Bir sonraki makalemde RSS konusuna devam ederek RSS içerisinde kullanabileceğiniz etiketleri anlatarak bu konuya devam edeceğim.

———————————————————————————–

Php ile Dinamik RSS beslemesi Yapı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.

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

Türkce açılımı Genişletilebilir İşaretleme Dili olan XML Verinin tanımlanması ve tarif edilmesi için kulanılır. HTML ’deki yapının aksine XML ’de kullanılacak olan Tag ’ler sonradan tanımlanır. Yani bir XML dökümanının yapısı tamamıyle sizin tarafından oluşturulur. Verinin tarif edilmesi için DTD adı verilen yapılar kullanılmaktadır. XML ve DTD ’nin birlikte kullanılması ile dökümanlar kendini tarif eden bir yapı halini alırlar. Çok farklı tipteki verileri orjinal formatlarında tek bir havuzda tutabilen XML, bilgiye hızlı, kolay ve ortamdan bağımsız olarak erişebilme imkanı sunar.

XML ve HTML arasındaki en belirgin fark XML’ in verinin kendisiyle ilgilenmesi HTML ’in ise verinin sunumuyla ilgilenmesidir. Buna bağlı olarak HTML dökümanları veriye ilişkin şekillendirme bilgilerini içerirken XML dökümanları ise verinin tanım bilgilerini içermektedir. XML’in tasarım amaçlarından biri de verinin taşınmasıdır.

Bahsedilen bu özellikleri incelendiğinde XML ’in pek çok önemli işlevi yerine getirdiği görülmektedir.

Burada önemli bir nokta olarak XML ’i HTML ’in yerine geçecek bir dil olarak düşünmek yerine HTML ’in tamamlayıcısı olacak olan bir dil şeklinde düşünmek uygundur.

Yıllardır firmalar ve uygulama geliştiriciler verilerin temsili (represent) üzerinde çalıştılar. XML, verilerin alış verişiyle ilgili temel sorunları ortadan kaldıran bir ortak dildir ve şu kolaylıkları sağlar;

• XML işaretler içine gömülü olan verilerin yapılandırması için kurallar tanımlar.
• Kendi terimlerimizi (vocabulary) tasarlamayı ve kendi verilerimizi temsil etmeyi sağlar.
• Web datasının (verisinin) depolanmasını ve iletilmesini sağlar.

Bu durumda XML, kuruluşların aralarında veri alışverişini sağlayan bir “evrensel bütünleşme” aracıdır. Web temelli uygulamaların geleceği olan XML, bir firma temelli olmadan bağımsız olarak veri temsil ve gönderme kuralları ortaya çıkmıştır. Bunun dışında Web data gibi kavramlar ortaya çıkmıştır. Ayrıca Web ’in yeni dili ve eski EDI (Electronic Data Interchange) teknolojisi yerine Web üzerinde veri taşımak için kullanılan yeni bir teknolojiyi ifade eder.

Çok farklı tipteki verileri orjinal formatlarında tek bir havuzda tutabilen XML, bilgiye hızlı, kolay ve ortamdan bağımsız olarak erişebilme imkanı sunar. Günlük yaşantımızda kullanmakta olduğumuz verilerin %80′ini oluşturan ve “unstructured” olma özellikleri nedeniyle kendi bulundukları medya dışında veri özelliklerini koruyamayan (kelime işlem, elektronik tablo çıktıları, PDF dokümanları, ses, resim vb…) farklı tipteki verilerin, oryantasyona gerek duymadan hiyerarşik bir yapıda kullanılabilmelerine olanak vermekte ve bu verilerin hızlı bir şekilde sorgulanabilmelerini sağlamaktadır. Öncelikle veri transferinin kolaylaşmasını ve verinin içerik bilgisiyle saklanabilmesini hedefleyen XML içerik ve sunum bilgilerini birbirinden ayırır. Bu özelliği ile de HTML ‘den farklılaşır.

• XML bir belgenin yapısını ve görünümünü tanımlamak için kullanılan uluslararası bir standartdır.
• XML yapılandırılmış belge ve verilerin evrensel formatıdır
• XML text tabanlı markup dilidir ve data alış verişinde kullanılan bir standarttır
• XML bilginin yapısını tanımlamak için kullanılan bir teknolojidir.
• XML bilgiyi tanımlayan ve web ‘te bilgi alış verişi için kullanılan standard bir biçimdir.
• XML markup dillerini tanımlayan bir metadilidir.
• XML verinin yapılandırılması ve tanımlanması için kullanılan bir teknolojidir.
• XML herhangi bir verinin biçimlenmesi,tanımlanması için kullanılan bir teknolojidir.

Yukarıdaki tanımlar birbirine benzemektedir. Bazı kelimeler veri, tanımlama,standart vs.. gibi çok fazla kullanılmış. Tanımlardaki bir farklılık XML’in hem bir teknoloji hem de bir dil olmasından doğmaktadır. Bazı tanımlar sadece XML teknolojisini tanımlarken bazıları dil olarak XML’i tanımlamışlar.

Bütün bu tanımlardan şu sonuçlar çıkarılabilir

• XML hem bir teknolojidir hem de bir dildir
• XML dil olarak markup dil’leri yaratmaya yarar.
• XML verileri tanımlamak için kullanılan bir teknolojidir.
• XML verileri tanımlamak için bir standart oluşturmak için yaratılmıştır.
• XML verileri standart bir şekilde tanımladığından web’te veya herhagi iki program arasında veri alış verişi kolaylaştırmaktadır.

Günümüz bilişim dünyasına bakacak olduğumuzda XML ’in her alanda karşımıza çıktığını görmekteyiz. Bu nedenle XML ’i bir anlamda geleceğin web dili olarak tanımlamak mümkündür.

Asp, Asp.Net, Php, Javascript, css, xml, wml, html, sql vb… birçok kategoride kod bulabilirsiniz.

Sitelerin hepsini bir araya toplayarak size sunuyorum ;

• hazirkod.com
• mydesign.gen.tr
• binbirkod.com
• jsindir.com
• kodmerkezi.com
• kodkutuphanesi.com
• kodara.com
• hazirkodlar.net
• kodcunuz.com
• htmlkod.tr.gg
• htmlkodlar.net
• htmlkodlari.bloggum.com
• kodekodu.com

Ayrıca bu konuda işe yarar yeni siteler keşfettikçe bu başlık altında güncellemeye devam edeceğim.