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

Cok basit bir hüner ile Firefox-Browseri öyle manipüle edebilirsiniz ki, ekran versiyonu basim icin kullanabilirsiniz. Bunun icin DOM-Inspector isimli plugin gerekiyor (Mac kullanicilar biraz daha sansli cünkü bu eklenti firefox üzerinde direk kurulu halde geliyor)

Simdi siradan bir website aciyorsunuz, örnegin http://www.seitwert.de ve Extras Menüsünden -> DOM Inspector aciyorsunuz. Ordan asagidaki adimlari takip ediyorsunuz:

HTML -> HEAD -> LINK. MEDIA´ya sag tikla ile oradaki (value) parametreyi “all” veya “print” yazip degistiriyorsunuz, veee iste bu kadar. Artik her siteyi güzel sekilde yazicidan cikartabilirsiniz.

(Bu makalenin Almanca versiyonunu okumak icin buraya tiklayiniz)

Serkan Aydin

Css ilk olrak 1995′de ortaya çıkti ve akabinde 1996 yılında W3C ’e kabul edildi. W3C ’ye katılması ile tüm tarayıcılar tarafından desteklendi. Bu tarihten itibaren W3C ’ye üye olan tüm tarayıcı grupları CSS ’nin yeni versiyonlar tarafından desteklenmesini kabul etmiştir. Css ise günden güne yeni özelliklerle gücüne güc katarak Mayıs 1998 ′de Css 2 ′ye geçiş yapılmıştır. Su an Css 2.1 versiyonunu kullanmaktayiz.

Simdi bu kadar ön bilginin üzerine Css ‘nin ne olduguna biraz daha derinlemesine girelim Html etiketleme sistemiyle calisan basit bir dildir sadece var olan etiketleri yazarsiniz ve ortaya basit bir Html sayfasi cikar ama dizayn olarak cok yetersizdir örnegin bir linkin üzerine mause gelince renginin degismesi gibi basit bir islemi bile xyapamazsiniz iste tam bu noktada Css imdadimaza yetiyor Css ile Html etikezlerine hükmedebiliyorsunuz hatta Html etiketlerine class `lar atayip özel dizaynlar sagliyabiliyorsunuz. Css `nin nasil kullanildigini ilerleyen derslerde adim adim isleyecegiz ve tanidikca cok seveceginize inandigim ve web tasarim unsurlari arasinda en basit olduguna inandigim bir dildir.

Css bir web sayfasinda üc iki ayri sekilde kullanilabilir bu kullanilis sekilleri ;

• Disardan import edilerek ( .css dosyalari olusturulur ve Html sayfamiza dahil ederiz.)
• <Head> ve </head> taglari arasinda tanimlayarak (.css dosyasi olusturup disardan importetmek yerine direk sayfanin icerisinde tanimlayabiliriz)
• Html etiketleri icine style olusturarak css olustururuz (Kullanim sekli itibarizle ilk iki secenekten farklidir. Css`nin en basit kullanim seklidir fakat fakat bu sekilde kullanmak ilk etaptta size zaman kazandirsada ileride düzenleme yaparken biraz ugrastirabilir.)

Css kullanim sekillerini bir sonraki derste anlacagim. Eger Ajax ‘e merak saldiysaniz Css en önemli yapitaslarindan biridir hatta Ajax teknigi icin bilinmesi gereken en önemli programlama dillerini siralamak gerekirse Javascript -> Css -> Xml ….. seklinde siralayabiliriz.

Bir sonraki Css dersimizde ilk örneklerimizi yapmaya baslayacagiz. Eger Css ilginizi cekti ve gelismelerinden ve yeniliklerinden haberdar olmak istiyorsaniz; Css orjinal sitesine bu sayfadan ulasabilirsiniz. Bir sonraki dersimizde görüsmek ezere.