24 Haziran 2011 Cuma

Web Sitesi İçin Translater (Javascript Translater)

Web sitenizi dünyaya açmak yabancı kullanıcıların da site içeriğinizden faydalanmasını sağlamak istiyorsanız web sayfanıza dil seçenekleri koymak zorundasınız. Bunu sağlamak için elinizde üç seçenek bulunmakta (ya da en azından benim bildiğim bu kadar)
  1. Sitenin her sayfası için farklı dillerde HTML dosyaları oluşturmak
  2. İnternetten bulacağınız ASP ya da PHP tabanlı yazılmış bir çeviri programını kendi sunucunuza entegre etmek
  3. Google Translate kullanmak

İlk seçenek ufak çaplı siteler için uygulanabilir. Ama pek de verimli olmaz.

İkinci seçeneği tercih etmek daha mantıklı. Ancak bu tip programların ücretsiz olanlarından bulmak kolay mı? Ücretsiz yazılımlar ne kadar verimli? denemeden bilemeyiz. Bunun haricinde ücretli programlardan/servislerden de faydalanılabilir. Ayrıca Joomla, Moodle, gibi web portalları kullanıyorsanız bu portalların dil paketlerini sunucuya yükleyerek de kullanıcılar için farklı dil seçenekleri oluşturabilirsiniz. Ancak bu sadece sayfa şablonuun ve bu şablona bağlı üyelerin görünümünü etkiler, içeriğiniz yine aynı kalır. Burda amacım şablonu da dahil olarak tüm siteyi istenen dile çevirmek.

Üçüncü seçenek benim gibi bedavacılar için... Diğer iki seçenekte bahsedilen işlemler sitenin sunucu kısmında(host üzerinde) gerçekleştirilir. Eğer benim gibi Blogger kullanıcıysanız maalese size ulaşabileceğiniz bir host alanı verilmiyor. bu durumda alternatif yollara başvurmanız gerekiyor. Bloggerın sunduğu bazı Gadget'lar bu sorun için çözüm olabilse de Bu gadgetlar ile birlikte gösterilen reklamlar, gadgetın sayfa tasarımına uymuyor oluşu dil bloguna seçeneği koymak isteyen bir blog sahibi için büyük bir problem. Tabii ki bu elimizin kolumuzun bağlı olduğu anlamına gelmiyor. İşte tam bu noktada Google'un çeviri servisi olan Google Translate imdadımıza yetişiyor. Bilindiği gibi bu servis sadece metinleri değil, tüm site içeriğini istenen dile çevirebiliyor. siteyi komple çevirmek için tek yapmamız gereken sitenin tam adresini çeviri kutucuğuna yazmak. Google tüm siteyi otomatik olarak, büyük bir doğrulukla istediğiniz dile çevirecektir. Ancak ziyaretçilerinizden bunu yapmalarını isteyemezsiniz.

İşte ben de tam bu noktada şunu düşündüm. Acaba javascript kullanarak(Javascript kullanıcı tarafında çalıştığı için yukarıda saydığım hosting ve yükleme sorunum olmayacak)bunu otomatik olarak yaptırabilir miyim? Yani ziyaretçi aynı diğer büyük sitelerde olduğu gibi, dil seçeneği menüsünden tek bir tuşa basarak tüm siteyi istediği dile çevirmesini sağlayabilir miyim? Bu düşünce üzerine küçük bir araştırma yaptım ve şu sonuçlara ulaştım,

-İlk olarak google translate'nin nasıl çalıştığını, çeviri ile ilgili sorgulamaların google çeviri sunucusuna nasıl yollandığını araştırdım. Türkçe'den İngilizce'ye çevirmesi için çeviri kutusuna bir metin ya da site adresi yazdığımda bu bilgiler sunucuya şu şekilde gönderiliyordu,

"http://translate.google.com/translate?hl=tr&sl=tr&tl=en&u="

Adres çubuğunda bu ifadenin karşısında çevirlmesi için yazdığım metin ya da site adresi yazıyordu. Böylelikle google sunucusuna sorgu göndermenin yolunu da bulmuş oldum. Yukarıdaki kod sadece ingilizce için geçerlidir. Diğer dillerin kodunu elde etmek için de ayrıca çeviri işlemleri yaptırılmalı ve adres çubuğunda baştan çeviri metnine kadar olan kısım kopyalanmalıdır. Bu şekilde google'un sunduğu tüm çeviri seçenekleri elde edilebilir.

-Sonra bunu javascript'e otomatik olarak nasıl yaptırabileceğim üzerine çalışmaya başladım. Yazacağım program iki şey yapmalıydı,

  1. Kullanıcı herhangi bir dili seçtiğinde program sitenin o anki sayfasına ait url'yi adres çubuğundan kopyalamalı ve bir değişkene aktarmalı
  2. Sonra da bu değişkenin değeri ile google'dan aldığımız o dille ilgili kodu birleştirip ardes satırına yazmalı ve googe sunucusuna dil sorgulamasını yollamalı
İşte aşağıda yazdığım kodlar bu işi yapıyor. Kulanıcı herhangi bir butona bastığında o butonla ilgili bir fonksiyon çalışıyor. Seçeneklerdeki her dil için ayrı bir fonksiyon yazdım. Hepsi temelde aynı işi yapıyor sadece değişken isimleri ve dil sorgusu için kullandığı kodlar farklı. dil sorgusu için kullanılan kodlar turuncu renkle renklendirilmiştir. Bu program üç dil için yapılmıştır. istenirse aynı mantıkla diğer diller de eklenebilr.

<div style="heigth:23px;">
<script language="javascript" type="text/javascript">
function eng(){
var a
a=document.location.href;
parent.location.href='http://translate.google.com/translate?hl=tr&sl=tr&tl=en&u=' +a
}

function ger(){
var g
g=document.location.href;
parent.location.href='http://translate.google.com/translate?js=n&prev=_t&hl=tr&ie=UTF-8&layout=2&eotf=1&sl=tr&tl=de&u=' +g
}

function frn(){
var f
f=document.location.href;
parent.location.href='http://translate.google.com/translate?js=n&prev=_t&hl=tr&ie=UTF-8&layout=2&eotf=1&sl=tr&tl=fr&u=' +f
}


</script>
<input type="button" value="" onclick="eng()" style=" background-image:url(ingiliz.jpeg); width:26px; height:22px; cursor:pointer; " title="English" /><input type="button" value="" onclick="ger()" style="background-image:url(alman.jpeg); width:26px; height:22px; cursor:pointer; " title="German" /><input type="button" value="" onclick="frn()" style="background-image:url(fransiz.jpeg); width:26px; height:22px; cursor:pointer;" title="French" />

</div>

Bu kodlamanın sonucunda oluşturulan javascript dil menü çubuğu şu şekilde görüntülenir,




17 Haziran 2011 Cuma

Javascript if Uygulaması (Javascript ile Basit Bir Hesap Makinesi)

javascript ifProgramlama öğrenmeye çalışan herkesin eninde sonunda karşılaşacağı bir problem vardır. Programcılar buna "Program Akış Denetimi" derler. Bilgisayar programı dediğimiz şey esasen akış halinde birbirini takip eden bir dizi işlemden ibarettir. Program akışı içinde bu işlemler bilgisayar tarafından süratle gerçekleştirilir ve sonuçları ekrana yansıtılır. Bazı programlar yapı itibariyle basittir. Sadece kullanıcıdan ya da herhangi bir yerden aldığı verileri işleyerek sonucunu gösterirler. Bu tip programlar tek yönde çalışırlar ve genelde sadece tek bir şarta dayalı işlemleri gerçekleştirirler ve çözüme ulaşırlar. Ancak bazı problemlerin çözümü bu kadar basit olmaz. Programcılar sıklıkla bilgisayara, "Şu şart halinde şunu yap, bu şart halinde bunu yap" şeklinde komutlar etkleyerek programa farklı durumlar için esneklik kazandırmak zorunda kalırlar. İşte bu farklı durumların sorgulandığı yer, belirlenen şarta göre program akışının yön değiştirdiği ya da olağan akışına devam ettiği bir kavşak noktası gibidir. Program akışı bu noktalardan denetlenir. Hemen hemen tüm programlama dillerinde bu denetleme "if" komutu ile yapılır. "if" komutu program akışını iki kola ayırır. İngilizce'de "eğer" anlamına gelen bu sözcük programa işleyeceği verileri, programcı tarafından önceden belirlenen kriterlere göre(büyüklük, küçüklük, eşitlik gibi)karşılaştırıp sonuca göre (evet yada hayır) program akışını yönlendirme olanağı verir.

Buraya kadar anlatılanlar Javascript için de geçerlidir. Javascript'te "if" komutu şu şekilde kullanılır;

if(aranan şart){
uygulanacak işlem
}
Bir sonraki işlem

Aranan Şart: x==5, secim=="yeni", a<5 gibi şartların sorgulandığı bölüm.

Uygulanacak İşlem: x=sayi1+sayi2, document.hesap.sonuc.value=islem gibi komutların uygulandığı, çeşitli işlemlerin yapıldığı kısım. Bu bölümde çeşitli aritmetik işlemler, karşılaştırmalar, döngüler gerçekleştirilebilir. Bir sonraki işlem: aranan şartın sağlanamadığı durumlarda yapıl Javascript'te "if komutu şu şekilde çalışır;

1- Önce parantez içindeki şart sorgulanır. Sorgulama sonucu evet ya da hayır dır.

2- Sonuç evet ise yani şart sağlanıyorsa, süslü parantezler içindeki işlemler gerçekleştirilir.

3- Sonuç hayır ise yani şart sağlanmıyorsa süslü parantez içindeki işlemler uygulanmaz. "if" bloğundan çıkılır ve hemen bir sonraki işlem gerçekleştirilir.

Birden fazla "if" komutunu iç içe kullanabilirsiniz. Yani bilgisayara "şu şart halinde, şu şartta şu şartı sorgula" şeklinde komutlar verebilirsiniz. Bu komutun iç içe uygulamasını daha sonraki bir yazıya bırakıp örnek bir program ile yazımı sonlandırmak istiyorum. Aşağıdaki kodlar web sayfasında çok basit, ilkel bir hesap makinesi oluşturmak için yazıldı. Kullanıcı arayüzü olarak HTML'nin form elemanlarını (textbox ve button) kullandım. Program yaı ve işlevsellik açısından o kadar iyi olmasa da "if" komutunu anlamamız açısından yararlı olacaktr. Ayrıca şunu da belirtmek istiyorum bu programın "endeks=selectedIndex " ile başlayan kısmını "Hakkı İcal"'in Javascript ders notlarından aldım. Oradan öğrendiklerimi geliştirip değiştirerek ürettiğim uygulamaları buradan sizlerle paylaşıyorum. Umarım hem sizin için hem de benim için faydalı olur.

İşte hesap makinesi kodları:

<script language="javascript1.2">
function hesapla(secme){ /* Bu satırda bir fonksiyon tanımlanıyor*/
var sayi1,sayi2,endeks, secilenIslem,islem /*değişkenler belirleniyor*/
endeks=secme.selectedIndex
secilenIslem=secme.options[endeks].text /*bu kısımda açılır menüden seçilen değeri"secilenIslem" değişkenine aktarıyor */

sayi1=eval(document.hesap.birinci.value)/* Sayısal işlem yapılacak değişkenlere*/
sayi2=eval(document.hesap.ikinci.value) /* kullanıcının girdiğideğerleraktarılıyor*/

if(secilenIslem=="Topla"){ /* bu kısımda kullanıcının seçtiği işlem*/
islem=sayi1+sayi2 /* sorgulanıyor ve işlem gerçekleştirilip sonucu*/
document.hesap.sonuc.value=islem /* "Sonuç" adlı text box'a yazdırılıyor*/
}
if(secilenIslem=="Çıkar"){
islem=sayi1-sayi2
document.hesap.sonuc.value=islem
}
if(secilenIslem=="Çarp"){
islem=sayi1*sayi2
document.hesap.sonuc.value=islem
}
if(secilenIslem=="Böl"){
islem=sayi1/sayi2
document.hesap.sonuc.value=islem
}
if (secilenIslem=="İşlemi Seçiniz"){ /*kullanıcı işlem seçimi yapmazsa uyarı*/
alert("Lütfen Bir İşlem Seçiniz") /*mesajı veriyor*/
}
}
</script>
<form name="hesap">
<div style="float:left;">
1. Sayı : <input type="text" value="" name="birinci" maxlength="10"

/><br />
2. Sayı : <input type="text" value="" name="ikinci" maxlength="10"

/><br />
Sonuç = <input type="text" value="" name="sonuc" maxlength="10" />
</div>
<div style="float:left;">
<select name="secim" onchange="hesapla(this)">
<option selected>İşlemi Seçiniz
<option>Topla
<option>Çıkar
<option>Çarp
<option>Böl
</select>
<input type="reset" value="Sil" />
</div>

</form>



Bu kodlamanın sonucunda hesap makinemiz şu şekilde görüntülenir.


1. Sayı :

2. Sayı :

Sonuç =





14 Haziran 2011 Salı

CSS3 ile Web Sayfasına Yuvarlak Köşeli Elemanlar Koymak

Bir web sayfasına içerik yerleştirilirken genellikle div, span gibi kutu özelliği olan ve sayfa üzerinde belirli bir yüzeyi kaplayan elemanlar kullanılır. Tablo ile web tasarımının modasının geçtiği şu günlerde, tasarımcılar sayfalarını "div" veya "span" gibi kutu elemanları ile hazırlamaktadırlar. Bu elemanlar CSS'nin verdiği sayısız özellikler sayesinde web tasarımcıların daha keliteli ve daha güzel görünümlü siteler tasarlamasına olanak sağlamıştır. Bu yazıda artık üçüncü versiyonu ile karşımıza çıkan CSS'nin tasarımcılara verdiği yeni bir imkandan bahsetmek istiyorum. CSS3 ile gelen "border-radius" kodu sayesinde artık tasarımcı hazırladığı web sayfasına köşeleri yuvarlatılmış HTML elemanları yerleştirebilir. Bunu bir örenek kod üzerinde gösterelim. Mesela bir "div" elemanı CSS3 sayesinde şu şekilde biçimlendirilebilir,

<div style="float:left; text-align:center; font-size:18px; background: #9CF; border:solid 5px #c1c6c7; border-radius: 55px 35px 20px 10px; padding:30px;">Köşeleri Yuvarlatılmış Div</div>

Bu kodlamanın sonucu aşağıdaki gibi görüntülenir.

Köşeleri Yuvarlatılmış Div

İsterseniz benzer bir kodlama ile yuvarlak butonlar da yapabilrisiniz. Alın size bir örnek,

<input type="button" value="Yuvarlak buton" style="text-align:center; font-size:18px; color:#fff; background: #9CF; border-radius:10px; padding:5px;"/>

Bu kodlama da şu şekilde görüntülenir,


"border-radius" bu kodun standart halidir. Eğer yaptığınız kodlamanın diğer web tarayıcılarda da sorunsuz çalışmasını istiyorsanız Şu kodları da sayfanıza eklemelisiniz,

-moz-border-radius:55px 35px 20px 10px; / Firefox için /
-webkit-border-radius:55px 35px 20px 10px; /Safari ve Google Chrome için /

Burda verdiğiniz
ilk değer: sol-üst köşeyi,
ikinci değer: sağ-üst köşeyi,
üçüncü değer:sağ-alt köşeyi,
dördüncü değer:sol-alt köşeyi

yuvarlatmak için vermeniz gereken yarıçap değerleridir. Eğer yarıçap için tek bir değer girerseniz, tüm köşeler aynı değerde yuvarlatılır.

Son olarak "border-radius" kodu ile uymlu tarayıcı listesini de verelim.

Uyumlu tarayıcılar:
-----------------------------
Firefox 3.5 ve üzeri
Internet Explorer 9 ve üzeri
Netscape Navigator 3 ve üzeri
Opera 10.5 ve üzeri
Google Chrome 4.0 ve üzeri

10 Haziran 2011 Cuma

Yazıların Arkaplan Rengini Değiştirmek

Web sayfanıza koymak istediğiniz metin içeriğinin önemli gördüğünüz kısımlarını işaretlemek, belirgin hale getirmek isteyebilirsiniz. Basit bir CSS kodu yardımıyla ders çalışırken kullandığınız fosforlu kalemle işaretler gibi metin içeriğinizin istediğiniz kısımlarını ya da tamamını işaretleyebilirsiniz. Bunun için kullanmanız gereken CSS kodu "background-color" dur. Bu kodu metin içeriğinizi işarelemek içi kıullandığınız HTML tagına (<b>, <a>, <span>, <div>,... gibi) bir "Style" özelliği olarak ekleyebilrsiniz. Bunu bir örnekle açıklayalım,

< b style="background-color: #9fc666;" > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a dictum augue. Nulla facilisi. Vestibulum commodo tellus nec urna posuere cursus. Nam nec odio magna. Praesent vulputate elementum erat, vel tincidunt nisi ullamcorper at...... </b>

Bu kodlamanın sonucu aşağıdaki gibi görüntülenir.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a dictum augue. Nulla facilisi. Vestibulum commodo tellus nec urna posuere cursus. Nam nec odio magna. Praesent vulputate elementum erat, vel tincidunt nisi ullamcorper at. Nulla cursus, lectus eu dignissim porta, massa ante pulvinar orci, hendrerit accumsan libero sem id turpis. Curabitur bibendum aliquet porta. Duis porta convallis scelerisque.

Taglar arasındaki farkı görebilmemiz açısından aynı işemi <div> tagı için uygulayalım.

<div style="background-color: #9fc666;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a dictum augue. Nulla facilisi. Vestibulum commodo tellus nec urna posuere cursus. Nam nec odio magna. Praesent vulputate elementum erat, vel tincidunt nisi ullamcorper at. Nulla cursus, lectus eu dignissim porta, massa ante pulvinar orci, hendrerit accumsan libero sem id turpis. Curabitur bibendum aliquet porta. Duis porta convallis scelerisque.</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a dictum augue. Nulla facilisi. Vestibulum commodo tellus nec urna posuere cursus. Nam nec odio magna. Praesent vulputate elementum erat, vel tincidunt nisi ullamcorper at. Nulla cursus, lectus eu dignissim porta, massa ante pulvinar orci, hendrerit accumsan libero sem id turpis. Curabitur bibendum aliquet porta. Duis porta convallis scelerisque.

Dikkat ettiyseniz iki tag arasında önemli bir fark var. HTML'nin bazı tağları sayfayı satır satır işaretlerken bazıları kutu şeklinde bir alanı işaretler. Tasarımınızı yaparken bu önemli farkı da göz önünde bulundurmalısınız.

Program Kullanmadan Bilgisayarın MAC Adresini Değiştirmek

rj45 soketFiziksel adres olarak da bilinen MAC(Media Access Control-Ortam Erişim Kontrolü) adresi, bir bilgisayarın yerel ağa ya da internete bağlanırken kullandığı cihazın (ethernet, FDDI, Bluetooth, Wi-fi gibi) değişmeyen numaralarıdır. Her üretici firma kendisine özel bir numara grubu kullanır. MAC adresi 12 numaradan oluşur. Bu numaralar onaltılık sistemde oluşturulmuştur.

Ethernet Kartı
İnternete bağlanan bir bilgisayara servis sağlayıcı tarafından bir IP numarası verilir. Bilgisayar bu numarayı kullanarak bağlanmak istediğiniz web sitesinin sunucu bilgisayarına kendisini tanıtır ve bu şekilde bağlantı kurulur. Bu numara modemi açıp kapattıkça değişir. Ancak MAC numarası değişmez. IP numarasını öğrenmek için Başlat >Çalıştır' a tıklayıp komut satırına cmd komutu yazılır ve DOS ekranı karşınıza çıkar. DOS oratmında "ipconfig /all" komutu yazılır. Bu komut bilgisayarın yerel ağ yapılandırmasını bir liste halinde size sunar. Burada "fiziksel adres" başlıklı satır sizin MAC numaranızdır.


Şimdi MAC numarasını program kullanmadan nasıl değiştirebileceğimizi gösterelim,

İlk olarak Masaüstünde "Ağ Bağlantılarım" a girilir. Buradan sodaki menüden "Ağ Bağlantılarını Görüntüle" seçeneğine tıklanır ve bilgisayarın "Yerel Ağ bağlantısı" görüntülenir. Bunun üzerine fare ile gelinerek Sağ tuş > Özelliklere tıklanır

Açılan menüde "Microsoft Ağları İçin İştemci" seçili olmalıdır. "Yapılandır" düğmesine tıklanır.

Sekmeli menüden "Gelişmiş" seçeneği seçilir. Ardından açılan listeden "Network Address" seçilir. Burada değer olarak sizin MAC numaranız görüntülenmektedir. Bu numara üzerinde istediğiniz sayısal değişiklikleri yapın ve "Tamam" düğmesine basın.


Bu işlemin ardından bilgisayar ağ bağlantınızı yenileyecektir. Tekrardan DOS ekranına dönüp "ipconfig /all" yazdığınızda "Fiziksel adres" kısmında MAC numarası üzerinde yaptığınız değişikliklerin gerçekleştirildiğini görebilirsiniz.

9 Haziran 2011 Perşembe

Web Sayfasına Resimli Arka Plan Yapmak

Sevdiğiniz, beğendiğniz ya da yaptığınız tasarıma uygun olduğunu düşündüğünüz bir resmi web sayfanızın arka planı olarak kullanabilirsiniz. Bunun için HTML dosyanızın <body > tagının içine "background" parametresini kullanarak istdiğiniz resmi (jpg ,gif ya da png) arkaplan olarak belirleyebilirsiniz. İstediğiniz bir resmi arkaplan yapmak için,

< body background="arlaplan.gif" >
....................
....................
...................< /body >

şeklinde bir kodlama yeterlidir. "background" parametresine değer olarak arkaplan resminin konumu verilir. Burada dikkat edilmesi gereken husus adresin doğru olarak verilmesidir. Aksi takdirde resim görüntülenmez. Bu işlem sonucunda seçtiğiniz resim sayfanın arka planına döşeme şeklinde (sayfa boyunca tekrar ederek) yerleşir.

Artık günümüzde arkaplan resmini yerleştirmek için CSS kodlarından faydalanılmaktadır. CSS kodları web tasarımda nesnelerin yerleştirilmesi için HTML kodlarına göre daha çok imkan tanımaktadır. Bunu bir örnek ile açıklayalım.

< body style="background:url(arkaplan.jpg); background-repeat:no-repeat;" >
....................
....................
...................< /body >

Son olarak tag içinde kullanılan parametreleri de açıklayalım,

background-repeat : Arkaplan resminin tekrarlanma şeklini belirlemek için kullanılır. Dört farklı değeri vardır.

no-repeat : Tekrarlama olmaz.
repeat : Resim tüm sayfa boyunca döşenir.
repeat-x : Yatay doğrultuda döşeme yapar.
repeat-y : Düşey doğrultuda döşeme yapar

Gelen Mailin Kaynağını (IP'sini) Bulmak (Hotmail için)

Hotmail Mesajınız var!
MSN'de biri ile konuşuyorsunuz birden mesaj kutunuza bir mail geliyor. Açıp bakıyorsunuz abuk sabuk şeyler, reklamlar, vs.vs.... Bazısının gönderen kısmında sitenin ismi yazıyor bazısında o da yok. Kendi kendinize düşünüyorsunuz. Bu mailleri kim gönderiyor? Mesele sadece abuk sabuk mesajlarla da bitmiyor.Bazı mailleri ise görünüm itibariyle bir bankanın ya da devlet kurumunun resmi sitesinden farksız. Sizden kimlik numaranızı kişisel bilgilerinizi talep ediyorlar.



-Lütffen aşağıdaki formu doldurunuz.
-Kredi kartınızın kullanım süresi dolmuştur. Yenisini gönderebilmemiz için lütfen eski kredi kart numaranızı ve şifrenizi giriniz, kişisel bilgilerinizi giriniz vesaire vesaire....

Acaba bu mesaj gerçekten bankanızdan ya da devlet kurumundan mı geldi? ya da üye olduğunuz internet sitesinden mi? Bir kere şunu kafanıza yazmanız lazım. Bankalar ya da devlet kurumları bu şekilde mailler ile işlerini yürütmezler. Bunu olsa olsa kötü niyetli kişiler yapar. Bu kişilerin yaptığı işe "phishing" (yemleme) denir. en çok kullanılan internet dolandırıcılığı yöntemlerinden biridir. Özellikle internet üzerinden alım - satım, e-ticaret işleri ile uğraşanlar için çok tehlikelidir. Dikkat edilmezse sonuçları çok ağır olabilir. İşte bu durumda kullanıcıya düşen görev ilk olarak mesajın kaynağını kontrol etmektir. Bu yazıyı Hotmail için hazırladım. Ancak diğer önemli e-posta servislerinin de buna benzer hizmetleri bulunmaktadır. Şimdi Hotmail'de bu işin nasıl yapıldığını görelim

hotmail ip sorgulama
Hotmail'inize gelen mesajların kaynak ip'sini öğrenmek için tek yapmanız gereken fare ile iletinin üstüne gelip sağ tuşa basmak ve çıkan menüden ileti kaynağını göster seçeneğine tıklamak. Ardından açılacak olan sayfada hotmail size bu mesajı gönderen kişinin ya da internet sitesinin ip numarasını gösterecektir.Bu ip numarasının internetten whois sorgusunu yapıp yerini öğrenebilirsiniz. Eğer böyle bir mesaja cevap verme niyetiniz var ise bunu İp kontrolünden sonra gönül rahatlığıyla yapabilrisiniz. Ama ben yine de bu tarz maillere karşı dikkatli olun derim.

8 Haziran 2011 Çarşamba

Flash Yıldız Gezegen Animasyonu Ver. 1.01

Daha önce yapmış olduğum yıdız gezegen animasyonunu biraz daha geliştirdim. Flash animasyon tekniklerini öğrendikçe yaptığım çalışmaları buradan sergilemeye devam edeceğim.

Eğer animasyon görüntülenmiyorsa bilgisayarınızın DNS numaralarını değiştirin. İsterseniz şu numaraları kullanabilirsiniz:

64.81.79.2
128.107.241.184



HTML Kodları ile Web Sayfasının Arkaplan Rengini Değiştirmek

Web sayfanızın arkaplan rengini değiştirmek için < body > tagının "bgcolor" parametresine o rengin ingilizce adını (red, yellow, white, black gibi) ya da onaltılık sistemde hazırlanmış renk kodunu girmeniz yeterlidir. Arkaplan rengi şu şekilde değiştirilir.

< body bgcolor="red" >
............
...........bu kısımda diğer sayfa elemanları bulunur.
...........
...........
< /body >

Bu kodlama ile sayfa arkaplanı kırmızı olarak değiştirilir. Burada "bgcolor" için red yerine onun hexadesimal(onaltılık) RGB kodu olan #FF0000 da yazılabilir. Sonuç aynıdır. Hexadesimal sayı sistemi 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F elemanlarından oluşur.

Burada RGB sisteminden de bahsedelim. RGB, Red-Green-Blue (Kırmızı-Yeşil-Mavi) ışık renklerinin karışımı ile diğer renklerin elde edilmesine dayalı bir renklendirme standardıdır. Her renk için hexadesimal sayılardan oluşan bir sayı çifti bulunmaktadır. Bu çiftlere verilen değere göre istenilen renk elde edilebilir. Konunun daha iyi anlaşılabilmesi için RGB sistemini bir tablo haline getirdim.

RENKLERKIRMIZIYEŞİLMAVİ
KODLAR#0,1,2..A,B,..F0,1,2..A,B,..F0,1,2..A,B,..F



Laptoplarla ilgili piyasa - fiyat araştırmalarım için => LapTopCanavarı

6 Haziran 2011 Pazartesi

Flash Saat

Web sayfanızda kullanabileceğniz. Granit desenli flash saat uygulaması.

Eğer flash saat görünmüyorsa DNS numaranızı değiştirin.

64.81.79.2
128.107.241.184

Numaralarını kullanabilirsiniz.

31 Mayıs 2011 Salı

Javascript iç içe for döngüsü

Javascript for döngüsü
Döngüler bilgisayarlara belirli bir işi, belirli şartlar altında istenen miktarda yaptırmak için kullanılır. Döngü yazmak programcıyı aynı kodu defalarca tekrarlamaktan kurtarır. Bu konuyu çarpım tablosu üretmeye yarayan bir program üzerinde inceleyelim. Bu arada javascriptte kullanılan for döngüsünü de anlatmış olacağız.

Neden çarpım tablosu diye sorabilirsiniz. Biliyorum, yararsız bir program. Ama döngü kavramını incelemek ve for döngüsünü hem de iç içe eklenmiş bir vaziyette uygulamak için ideal bir çalışma. Önce For döngüsünün ne olduğuna bir bakalım



For Döngüsü:

Javascript'te bir işlemi/hesaplamayı istenen sayıda tekrarlamak için kullanılır. Ufak bir hesaplama ile programcıyı sayfalar dolusu kod yazmaktan kurtarır, zaman ve emekten tasarruf sağlar. For döngüsü şu şekilde kullanılır,

for (sayılacak değişkenin ilk değeri; sayılacak değişkenin limiti; altma veya azalma miktarı)
{
Bu bögeye (süslü parantezler arasına) yaptırılmak istenen işlem yazılır.
}
sayılacak değişkenin ilk değeri şöyle belirlenir;

i=1;

Javascript'te for döngüsü içinde önceden tanımlanma şartı olmaksızın değişken yazabilir ilk değerini verebilirsiniz. Şimdi "i=1" ile bir değişken oluşturduk ve buna ilk değernin atadık. Hesaplamanın ne zamana kadar yapılacağını belirlemek için değişkenin alabileceği değerlerin, programın işleyişine uygun bir şekilde sınırlanması gerekir. Bunu da yapalım,

i<=10;

Böylelikle i değişkeni 10 değerine gelinceye kadar(10 da dahil) döngü için belirlenen işlemler tekrarlanır. Verilen değerlerin artma ya da azalma miktarı şu şekillerde verilebilir.

i=i+1 veya ++i
i=i-1 veya --i 

lkinde bire birer artar ikincisinde birer birer azalır. isterseniz artma/azaltma miktarını değiştirerek işlem adedini küçültebilirsiniz. süslü parantezler içinde de yapılacak işlemi yazarsınız.

{
k=i*j
}

For döngüsü matruşka gibidir
For döngüleri iç içe kullanılabilrler. İç içe for döngüsü kullanılırken süslü parantezleri açık unutmamaya ve doğru yerlerde kullanmaya dikkat edin. iç içe for döngüsü matruşka gibidir.  Yani iç döngüyü kendi içinde dış döngüyü de kendi içinde kapatmalısınız.

Bu kadar önbilgiden sonra programı incelemeye başlayabiliriz. Programımız şunları yapıyor
Aşağıdaki butona basınca;

-Çarpım tablosunu oluşturmakla görevli carp isimli bir fonksiyon tanımlıyor. (Aslında bu fonksiyona ihtiyacımız yok Ama programın sayfa açılır açılmaz çalışmasını istmediğim için ben üzerine tıkladığım zaman olayı başlatacak bir düğme için bu fonksiyonu yazdım)
-Bir tablo başlatıyor,
-İlk satırı açıyor ve içine birden 9 a kadar numaraları sıralıyor. (bu kısım elle yapıldı döngüye dahil değil)
-İlk döngüye giriyor bu döngü "i=1" için ilk satırı oluşturuyor
-ikinci döngüye giriyor bu döngü "j=1" için ilk sütunu oluşturuyor.Böylelikle tablonun ilk hücresi oluşturulmuş oluyor. Ardından k=i x j çarpımını yapıyor ve hem çarpma işlemini hem de sonucunu bu hücreye yazıyor. İç döngünün başına geliyor ve ikinci hücreyi oluşturuyor. Bu iç döngü bu şekilde "j=9" oluncaya kadar hücreleri oluşturup içine sonuçları yazmaya devam ediyor."i=9" değeri de hesaplandıktan sonra iç döngüden çıkılıyor ve dıştaki döngüye giriliyor. İç döngü tmamlandığında "i=1 "olan değer +1 arttırılarak "i=2" için aynı döngü yeniden tekrarlanıyor. "i="10" olduğunda dış döngü de tmamlanıyor ve son olarak tablo etiketi kapatılıp çarpım tablosu tamamlanıyor.

İşte tüm bu hesaplamaları yapan programın kodları ;

<script language="javascript1.2">

function carp(){

document.writeln("<table Border=1>")

document.writeln("<tr><td>"+ 1 + "</td><td>"+2+"</td><td>"+ 3 + "</td><td>"+4+"</td><td>"+ 5 + "</td><td>"+6+"</td><td>"+ 7 + "</td><td>"+8+"</td><td>" + 9 + "</td></tr>")

for (i = 1; i <= 10; ++i)

{

document.writeln("<tr>")

for (j =1; j<=9; ++j)

{k = i * j

document.writeln("<td>" + i + "x" + j + "=" + k + "</td>")

}

}

document.writeln("</tr>")

document.writeln("</table>")

document.writeln("<input type=button Value= geridön_geridööön onclick=parent.location='http://infial.blogspot.com/2011/05/function-carpdocument.html' />")

}
</script>
<input type="button" Value="Çarpım tablosunu göster" onclick="carp()" />


Turuncu ile işaretli olan yeri yazmayın. O kısmı bu sayfaya geri dönüş için koydum.
Bu kadar kafa yormaya ne gerek var? Ben elimle oturur yazarım bütün tabloyu diyorsanız, uğraşmak istiyorsanız siz bilirsiniz. :)))
İşte size tek tıkla çarpım tablosu!!!


29 Mayıs 2011 Pazar

HTML Metin Hizalama

Web sayfanıza yerleştirmek istediğiniz metin içeriğnin daha güzel görünmesi ve özellikle sayfa tasarımıyla uyumlu olması için metnin uygun bir biçimde hizalanması gerekir. Hizalama işlemi CSS kodları ile yapılır. Hizalama işlemi için metni işaretlemekte kullandığımız herhabgi bir HTML tagının (< div >, < b >, < p > gibi) içinde, "text-align" kodunun parametrelerine "left, right, center ve justify" değerlerinden birini yazmamız yeterli olacaktır. Ben aşağıdaki metinleri < div > tagının içinde hizaladım. İşte size bir hizalama örneği,

< div style="text-align: left; border:solid #333;" >
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a dictum augue. Nulla facilisi. Vestibulum commodo tellus nec urna posuere cursus. Nam nec odio magna. Praesent vulputate elementum erat, vel tincidunt nisi ullamcorper at. Nulla cursus, lectus eu dignissim porta, massa ante pulvinar orci, hendrerit accumsan libero sem id turpis. Curabitur bibendum aliquet porta. Duis porta convallis scelerisque. Curabitur id lectus nulla, ac mattis quam. Aliquam malesuada feugiat turpis a aliquet. Phasellus faucibus magna lobortis lectus semper vel scelerisque risus hendrerit. Integer tristique eros in augue suscipit tristique. Duis dui felis, vulputate scelerisque rutrum in, cursus in urna. Nam placerat condimentum odio at adipiscing. Curabitur posuere lacus in magna cursus a sagittis est dignissim.< /div >

"text-align" ile hizalanan metinler şu şekillerde görüntülenir;

text-align:left (sola yasla)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a dictum augue. Nulla facilisi. Vestibulum commodo tellus nec urna posuere cursus. Nam nec odio magna. Praesent vulputate elementum erat, vel tincidunt nisi ullamcorper at. Nulla cursus, lectus eu dignissim porta, massa ante pulvinar orci, hendrerit accumsan libero sem id turpis. Curabitur bibendum aliquet porta. Duis porta convallis scelerisque. Curabitur id lectus nulla, ac mattis quam. Aliquam malesuada feugiat turpis a aliquet. Phasellus faucibus magna lobortis lectus semper vel scelerisque risus hendrerit. Integer tristique eros in augue suscipit tristique. Duis dui felis, vulputate scelerisque rutrum in, cursus in urna. Nam placerat condimentum odio at adipiscing. Curabitur posuere lacus in magna cursus a sagittis est dignissim.


text-align:center (ortala)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a dictum augue. Nulla facilisi. Vestibulum commodo tellus nec urna posuere cursus. Nam nec odio magna. Praesent vulputate elementum erat, vel tincidunt nisi ullamcorper at. Nulla cursus, lectus eu dignissim porta, massa ante pulvinar orci, hendrerit accumsan libero sem id turpis. Curabitur bibendum aliquet porta. Duis porta convallis scelerisque. Curabitur id lectus nulla, ac mattis quam. Aliquam malesuada feugiat turpis a aliquet. Phasellus faucibus magna lobortis lectus semper vel scelerisque risus hendrerit. Integer tristique eros in augue suscipit tristique. Duis dui felis, vulputate scelerisque rutrum in, cursus in urna. Nam placerat condimentum odio at adipiscing. Curabitur posuere lacus in magna cursus a sagittis est dignissim.


text-align:right (sağa yasla)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a dictum augue. Nulla facilisi. Vestibulum commodo tellus nec urna posuere cursus. Nam nec odio magna. Praesent vulputate elementum erat, vel tincidunt nisi ullamcorper at. Nulla cursus, lectus eu dignissim porta, massa ante pulvinar orci, hendrerit accumsan libero sem id turpis. Curabitur bibendum aliquet porta. Duis porta convallis scelerisque. Curabitur id lectus nulla, ac mattis quam. Aliquam malesuada feugiat turpis a aliquet. Phasellus faucibus magna lobortis lectus semper vel scelerisque risus hendrerit. Integer tristique eros in augue suscipit tristique. Duis dui felis, vulputate scelerisque rutrum in, cursus in urna. Nam placerat condimentum odio at adipiscing. Curabitur posuere lacus in magna cursus a sagittis est dignissim.


text-align: justify (iki yana yasla)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a dictum augue. Nulla facilisi. Vestibulum commodo tellus nec urna posuere cursus. Nam nec odio magna. Praesent vulputate elementum erat, vel tincidunt nisi ullamcorper at. Nulla cursus, lectus eu dignissim porta, massa ante pulvinar orci, hendrerit accumsan libero sem id turpis. Curabitur bibendum aliquet porta. Duis porta convallis scelerisque. Curabitur id lectus nulla, ac mattis quam. Aliquam malesuada feugiat turpis a aliquet. Phasellus faucibus magna lobortis lectus semper vel scelerisque risus hendrerit. Integer tristique eros in augue suscipit tristique. Duis dui felis, vulputate scelerisque rutrum in, cursus in urna. Nam placerat condimentum odio at adipiscing. Curabitur posuere lacus in magna cursus a sagittis est dignissim.

Not :
Metinlerdeki garip yazı dikkatinizi çekmiştir. Örnek metni Lorem Ipsum' dan aldım. Bu da nedir yahu? diyorsanız işte size sitesinden kısa bir açıklama,

"Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur."

Eğer bu kadar bilgi sizi tatmin etmediyse, ayrıntılı bilgi ve örnek yazı almak için Lorem Ipsum dan yararlanabilirsiniz.

25 Mayıs 2011 Çarşamba

Web Sayfasına Button Eklemek


Butonlar web sitelerinin kullanıcı kayıt formlarında ya da üye giriş panellerinde sıklıkla karşılaştığımız HTML form elemanlarıdır. Kendilerine verilen işleve bağlı olarak, tıklandıklarında formdaki ya da paneldeki bilgileri sunucuya iletmekten tutun da kullanıcıyı başka bir HTML sayfasına yönlendirmeye kadar pek çok işi yaparlar. Web sayfalarına buton <input type="button(veya submit") / > tagı ile eklenir. Şimdi bunu bir örnek üzerinde açıklayalım,

<input type="button" value="Gönder" name="buton1" title="Düğmeye bas" onclick="parent.location='http://www.google.com'"/>
< input type="reset" value="sil" name="silgi" title="Temizle"/>

Bu kodlamanın sonucu sayfada şu şekilde görüntülenir.


Son olarak bu tag içindeki parametreleri açıklayalım.

name : Button'u isimlendirmek için kullanılır. Burdan alınan bilgilerin sunucudaki programda işlenmesi için gereklidir.

title : Kullanıcı fare ile buton üzerine geldiğinde görüntülenmesi istenen bilgi mesajı için kullanılır.

value : Buton üstüne yazı yazmak için kullanılır.

Yukarıda turuncu ile işaretlenmiş iki tane parametre var. Birincisinde bulunan onclick="parent.location='http://www.google.com'" ifadesinde onclick ziyaretçinin butona tıklaması olayıdır. "parent.location" ise butona tıklandığında ziyaretçinin belirtilen web sayfasına yönlendirilmesi için kullanılılan javascript kodudur. İkincisi ise type="reset" ile butona form sayfasındaki bilgileri silme özellği kazandırmak için kullanılır.


24 Mayıs 2011 Salı

Blogger'a swf Flash Eklemek

Sitenizde ziyaretçilerinize hoşça vakit geçirtmek için flash oyunlar koymak istiyor. ve karmaşık javascript kodları ile uğraşmak istemiyorsanız < embed / > tagı'nı kullanabilirsiniz.İşte size bunun bir örneği,

< embed src="oyun.swf" height="349" width="425" / >

Burada "src" parametresine swf dosyasının konumunu yazıyoruz. Peki bloguma flash oyun nasıl eklerim dediğinizi duyar gibiyim. Bildiğiniz gibi Blogger swf uzantılı dosyaları eklemeye izin vermiyor. Bu durumda önce swf dosyamızı internette bulacağımız ücretsiz depolama sitelerinden birine(Fileden, swfcabin, googlesites gibi) yüklemekle işe başlıyoruz. Bu herhangi bir ftp sunucusu da olabilir. Sonra bu dosyanın adresini alıyoruz ve "src" parametresinin karşısına yazıyoruz. Böylelikle blog sayfanız görüntülendiğinde oyunun swf dosyası sizin belirttiğiniz adresten sayfanıza yüklenir ve kullanıcı oyunu rahatlıkla oynamaya başlayabilir. Tabi burda yüklenme süresi normal sitelere göre biraz daha uzun olabilir ama oyun bir kere yüklendikten sonra sorunsuz çalışacaktır.

Yok ben yüklemeyle uğraşmak istemiyorum da diyebilirsiniz. Bu durumda bir alternatifiniz daha var. Oyun sitelerinden beğendiğiniz bir oyunun o site üzerindeki konumunu belirleyip adres olarak orayı gösterebilirsiniz. Ancak bu durum anlaşılırsa site sahibi ile aranızda tatsız olaylar gelişebilir. Ben swf dosyamı google sites üzerinde bir adrese yükledim. Google sites Türkiye'de hala yasaklı olabilir bu durumda oyunu göremeyebilirsiniz. Oyunu görmek istiyorsanız ağ bağlantılarınızdan DNS ayarlarınızla oynamanız gerekir.

Size kullanabileceğiniz iki DNS adresi vererek yazımı bitiriyorum.

64.81.79.2
128.107.241.184

Oyun görüntülenmiyorsa DNS olarak bu numaraları girin. İyi eğlenceler...


Web Sayfasına Textbox (Yazı Kutusu) Eklemek

Textboxlar web sitelerinin kullanıcı kayıt formlarında veya üye giriş panellerinde sıkça rastladığımız, üyelerin ya da üye olacak ziyaretçilerin ad, soyad kullanıcı adı, şifre v.b. bigilerini toplamak için kullanılan HTML form elemanlarıdır. Web sayfasına textbox; için < input type="text" / > tagı ile eklenir. Bu tagın genel kullanılış biçimi şu şekildedir,

< input maxlength="40" name="ad" title="Adını Yaz" type="text" value="Kullanıcı Adı" width="150" height="20" / >

Daha iyi anlaşılması açısından bu tag'ın nasıl kullanıldığını bir örnek üzerinde gösterelim.

Kullanıcı Adı : < input type="text" name="ad" value="e-mail adresiniz" title="Kullanıcı Adını Yaz" maxlength="40" width="150" height="20" / > < br/ >
Şifre : < input maxlength="15" name="ad" title="Şifreni Yaz" type="password" value="" width="150" height="20" / >

Bu kodlamanın sonucu aşağıdaki gibi görüntülenir,

Kullanıcı Adı :

            Şifre :

Son olarak bu tag içindeki parametreleri de açıklayalım.

name : Textbox'u isimlendirmek için kullanılır. Burdan alınan bilgilerin sunucudaki programda işlenmesi için gereklidir.

maxlenght : Textbox'a girilecek karakter sayısını kısıtlamak için kullanılır.

height : Kutu yüksekliğini belirlemek için kullnılır.

width : Kutu genişliğini belirlemek için kullanılır.

value : Textbox'a ilk değerini vermek için kullanılır. Buraya yazdığınız yazı kutu içinde görüntülenir. Kullanıcını kutuya herhangi bir değer(ad, soyad bilgisi, şifre gibi)girdiği zaman başlangıç değeri değişir ve yeni değer işlenmek üzere sunucuya gider.

title : Kullanıcı fare ile kutu üzerine geldiğinde görüntülenmek istenen bilgi mesajı için kullanılır.

Not : Verdiğim kod örneğinde turuncu ile işaretlediğim yer dikkatinizi çekmiştir. Eğer "type" parametresine değer olarak "password" girerseniz browser kullanıcının girdiği şifreyi göstermez onun yerine yıldız veya içi dolu dairecikler koyar.


23 Mayıs 2011 Pazartesi

Web Sayfasına Radiobutton Eklemek

İnternette gezinirken uğradığınız sitelerin kayıt formlarında sıklıkla karşılaştığınız daire şeklindeki onay kutucukları hepinizin dikkatini çekmiştir. "radiobutton" adı veriilen bu elemanlar kullanıcılara çoktan seçmeli sorular sormak için kullanılırlar. Genelde medeni durum, cinsiyet gibi tek cevap gerektiren sorular sorulurken kullanılırlar. Bu tip elemanlar site sahiplerinin ziyaretçilerle ilgili bilgi toplamalarını kolaylaştırır. Ayrıca günümüzde oldukça yaygınlaşmış olan alışveriş sitelerinde de kulanıcılar için ürün seçimi, fiyat aralığının belirlenmesi, marka seçimi gibi konularda kolaylık sağlar. Gelin şimdi bu minik elemanın nasıl kullanıldığına bir bakalım ;

Radiobuttonlar web sayfalarına < input type="radio" / > tagı ile yerleştirilir. Bu tagın genel kullanımı şu şekildedir,
Siteye kaydolmak isteyen bir ziyaretçinin cinsiyetinin sorgulanması

Lütfen cinsiyetinizi belirtiniz:
< input type="radio" name="cinsiyet" value="k" title="Birini Seçin" />Kadın < br/ >
< input type="radio" name="cinsiyet" value="e" title="Birini Seçin" />Erkek < br/ >

Bu kodlamanın sonucu şu şekilde görüntülenir,

Lütfen cinsiyetinizi belirtiniz:
Kadın
Erkek

Bu tag içindeki parametreleri de açıklayalım.

name : Radiobutonları gruplandırmak için kullanılır. Bu şekilde kullanıcının iki seçenekten yalnızca birini seçebilmesi sağlanır. İsimler farklı olursa iki seeçenek de işaretlenebilir. Bu da kullanıcı bilgilerinde karmaşaya yol açar. Bu yüzden aynı türden seçmeli sorularda radyobutonlara verilen isimler de aynı olmalıdır.

value : Radyobutondan yapılan seçimle ilgili bir değerin sunucuya aktarılması için kullanılır. Aktarılan değer sunucuda işlenir ve veri tabanına kaydedilir. Mesela bu örnekte erkek seçilirse sunucuya "e" değeri yollanmış olur.

title : Fare ile radiobutton üzerine gelindiğinde görüntülencek bilgi mesajı için kullanılır.

21 Mayıs 2011 Cumartesi

Resimlere Link Vermek

Web tasarımda görsellik herşeyden önce gelir. Görsel öğeler metinlere göre daha dikkat çekicidir ve anlaşılması kolaydır. Web sayfanızın içeriğini uygun görsellerle donatırsanız ziyaretçileriniz sayfada gezinirken zorlanmaz. Görsel öğeler sayfa kullanımını kolaylaştırır. Bu sebeple tasarımcı sayfayı hazırlarken resimlerden olabildiğince çok faydalanmalıdır. Resimlere link vermek buna örnek olarak gösterilebilir. Mesela bağlantıları;

Hotmail
Google
Yahoo
Bing
Facebook

Yapmak yerine,







Şeklinde resimlere link vererek web sayfanızı daha kullanışlı hale getirebilirsiniz. Sayfaya resim eklemek için < img/ > tagı kullanılır. Linkler < a > < /a > tagı ile verilir. Resme link vermek için < img/ > tagını < a > < /a > tagları arasına koymak gerekir. Şimdi bunun nasıl yapıldığını gösterelim;

< a href="http://www.facebook.com" target="_blank" title="Facebook" ><img src="facebook.jpeg" alt="Facebook" /> < /a >

Bu kodlamanın sonucu aşağıdaki gibidir;

Facebook


Son olarak taglar içinde gördüğünüz "src", "href", "title", "alt", ve "target" parametrelerini açıklayalım,

src : Görüntülenecek resmin konumunu belirtmek için kullanılır.

href : Bağlantı linkinin adresini yazmak için kullanılır.

target : Bağlantıya tıklandığında yeni sayfanın nasıl açılacağını belirtmek için kullanılır.Değer olarak _blank yazılırsa bağlantı, sizin sayfanız kapanmadan yeni bir sayfada açılır; _self yazılırsa sizin sayfanız kapanır ve linkin bağlanıdğı sayfa görüntülenir.

title : Linkeleri verirken kullanılır. Ziyaretçi fare ile link üzerine geldiğinde açıklayıcı mesajlar görüntülenmesini sağlar.

alt : Web sayfasına resim eklerken kullanılır. Ziyaretçinin web browser'ı (Internet Explorer, Firefox, Chrome artık her ne ise) resmi gösteremediği zaman resme alternatif bir metnin görüntülenmesini sağlar. Ayrıca buraya yazılan yazılar arama motorları tarafından indexlendiğinden "alt" parametresini kullanmanız sitenizin bulunabilirliğini arttıracaktır.

Bu şekilde resimleri düğmelere(buttonlara) çevirmiş oluyoruz...

Web Sayfasına Liste Eklemek

Web sayfamda içeriğimi başlıklar halinde görüntülemek istiyorum nasıl yapabilirim? Sitemde içindekiler bölümü oluşturmak istiyorum nasıl yaparım? HTML sayfasında listeleme nasıl yapılır? HTML bir insan olsaydı tüm bu sorulara şu cevabı verirdi:

< ol > < /ol > ve < ul > < /ul > taglarını kullan!!

Peki < ol > ve < ul > tagları ne manaya gelir? Nasıl kullanılır diye sorduğunuzu duyar gibiyim. Lafı uzatmadan açıklayayım da siz de kurtulun ben de!!

< ol > : Ordinary list "sıralı liste" demektir. Tercih ettiğiniz tipe göre liste elemanları 1,2,3 veya a,b,c veya i, ii, iii şeklinde işaretlenerek sıralanırlar.

< ul > : Unordinary list "sırasız liste" demektir. Tercih ettiğniz tipe göre liste elemanları disk, çember ya da kare şeklinde işaretlenerek sıralanırlar.

Her iki liste türünde de sılamak istediğimiz elemanları < li > < /li > taglarının arasına yazarız. Şimdi sıralı liste nasıl yapılır gösterelim:

< ol type="a" >
< li > Birinci Eleman< /li >
< li >İkinci Eleman< /li >
< li >Üçünncü Eleman< /li >
< li >Dördüncü Eleman< /li >
< /ol >

Burada type parametresine a, 1, i, I, A şeklinde değerler verilebilir. Çeşitli Durumlar için listeleme stillerini aşağıda tablo şeklinde gösterdim.

type="a" için;type="1" için;
  1. Birinci Eleman
  2. İkinci Eleman
  3. Üçünncü Eleman
  4. Dördüncü Eleman
  1. Birinci Eleman
  2. İkinci Eleman
  3. Üçünncü Eleman
  4. Dördüncü Eleman
type="i" için; type="I" için;
  1. Birinci Eleman
  2. İkinci Eleman
  3. Üçünncü Eleman
  4. Dördüncü Eleman
  1. Birinci Eleman
  2. İkinci Eleman
  3. Üçünncü Eleman
  4. Dördüncü Eleman

< ul > yani sırasız listenin kullanımı da diğeri gibidir burdaki tek fark type parametresine circle, disc ve square değerlerinin yazılmasıdır. Bu tagın genel yazımını ve kullanııclara sunduğu listeleme stil seçeneklerini aşağıda sıraladım:

< ul >
< li >Birinci Eleman < /li >
< li >İkinci Eleman < /li >
< li >Üçünncü Eleman < /li >
< li >Dördüncü Eleman < /li >
< /ul >

ul_liste

Liste elemanlarının görünümü tarayıcıdan tarayıcıya değişim gösterebilir. Ayrıca kullandığınız metin editörü de bunu etkileyebilir. Mesela ben Blogger'ın editörünü kullanıyorum ve bu editör sırasız listelerde sadece "disc" stiline izin verdiği için diğer stilleri bir resim dosyası olarak göstermek zorunda kaldım. Liste konusu sadece burda yazdıklarımla sınırlı değil. Ayrıca CSS ve javascript kullanarak liste elemanlarının görünümünü büyük ölçüde değiştirebilirsiniz. CSS ve Javascript kullanarak listelerden açılır menüler tasarlanmakta. İsteyenler internette bununla ilgili pek çok kaynak bulabilir. Yakında ben de listelerden menü yapımı ile ilgili bir yazı yazmayı planlıyorum. Şimdilik hepsi bu kadar. Hepinize kolay gelsin.

English Version

19 Mayıs 2011 Perşembe

Web Sayfasına Checkbox (Onay Kutucuğu) Koymak

İnternette gezinirken, girdiğiniz web sayfalarının özellikle kullanıcı kayıt formu bölümlerinde; ilgi alanlarınız başlığı altında, ziyaretçilerin eğilimleri ile ilgili hızlı veri toplamaya yarayan onay kutucuklarına rastlamışsınızdır. Bu bölümlerde ziyaretçilere müzik, sinema, gezi, teknoloji gibi sıralı seçenekler sunulur ve ziyaretçi bu seçeneklerin başında bulunan küçük kutucuklara tik işareti koyarak onaylar. Seçilen kutucuklar sitenin sunucusuna bir takım değerler gönderirler ve bu değerler işlenerek veri tabanına kaydedilir. İşte bu bilgileri toplamakla görevli küçük form elemanına "checkbox" onay kutucuğu adı verilir. Web sayfasına checkbox eklemek için HTML sayfasına < input type="checkbox" / > tagını uygun bir yere eklemeniz yeterlidir. Bu tagın görevini yerine getirebilmesi için gerekli birtakım parametrelerin tag içine yazılması gerekir. Bu kadar açıklamadan sonra şimdi de tagımızın nasıl kullanıldığını gösterelim;

< input type="checkbox" name="box1" checked="checked" value="secim1" title="Seç Birini" /> Birinci Seçenek < br/>
< input type="checkbox" name="box2" />İkinci Seçenek < br />
< input type="checkbox" name="box3" />Üçüncü Seçenek < br />
< input type="checkbox" name="box4" /> Dördüncü Seçenek < br />

Birinci Seçenek

İkinci Seçenek

Üçüncü Seçenek

Dördüncü Seçenek


Şimdi de tag içindeki turuncu ile işaretlenmiş olan parametreleri açıklayalım;

name : Onay kutucuğunu isimlendirmek için kullanılır. Web sayfasında birden fazla konuda onay kutucukları kullanılmış olabilir. Bu durumda ziyaretçiden gelen onay verisinin ne ile ilgili olduğunun sunucudaki bilgisayara belirtilmesi ve işlemlerde olası karmaşanın önlenmesi için checkbox'un mutlaka isimlendirilmesi gerekir.

checked : Bazı durumlarda onaylanmış olması şart olan seçeneklerin otomatik olarak onaylı görünmesi için kullanılır.

value : Onay kutucuğunun işlenmek üzere sunucuya göndereceği değeri belirtir.

title : Ziyaretçi fareyi onay kutucuğunun üstüne getirdiğinde beliren bilgilendirme mesajı için kullanılır.

Web Sayfasına Yazı Alanı Eklemek

Web sitenizi ziyaret edenlerin görüş ve önerilerini yazabilecekleri yazı alanları oluşturmak için < textarea > < /texarea > tagını kullanmalısınız. bu tag kullanıldığı yerde bir yazı alanı oluşturur. Bu tagın genel kullanımı şu şekildedir;

< textarea cols="15" rows="15" style=" float: left; font-size:16px; font:'Arial Black'; background: #333; color:#09F; text-shadow: 0.1em 0.1em 0.5em #FFF" > Yazı Alanı< /textarea >

< textarea > tagının içinde kullandığımız parametreleri açıklayalım;

cols : Yazı alanının genişliğini yani bir satırda kullanılabilecek max karakter sayısını belirlemek için kullanılır.

rows : Yazı alanının yüksekliğini (bir kerede görüntülenecek satır sayısını) belirlemek için kullanılır.

style : Pek çok HTML tagının içinde kullandığımız bu parametreyi burada yazı alanını biçimlendirmek için kullandık. Yazı alanına arkaplan rengi, yazı karakteri, harf puntosu ve yazıların altına gölge, ışıltı (text-shadow efekti internet explorer6 da görüntülenmez) gibi görsel özellikler ekledik.

14 Mayıs 2011 Cumartesi

Web Sayfasında "iframe" Kullanmak

< iframe > tagı web sitelerinde sayfaya dahili bir html sayfası yerleştimek için kullanılır. Bu tagı koyduğunuz yerde bir kutucuk belirir ve bu kutucuk içinde adres olarak belirttiğiniz html sayfası görüntülenir. Web sitelerinde sıklıkla görmüş olduğunuz içinde kayan yazıların olduğu (genelde "Duyurular" başlığı altında yayınlanan hareketli yazılar için kullanılır) kutular iframe ile yapılır. Bu tagın genel kullanımı şu şekildedir,

< iframe src="deneme.html" width ="400" height="550" scrolling="no" frameborder="1" name="deneme" id="deneme" > < /iframe >

Şimdi "iframe" içinde kullanılan parametreleri açıklayalım;

iframe
src : Görüntülenmek istenen html sayfasının adresini belirtmek için kullanılır. Yeri gelmişken söyleyeyim; adres kısmına ille de html sayfası koymak zorunda değilsiniz. İsterseniz bir video ya da resim dosyasının adresini de verebilirsiniz. Browser'ınız o dosyaları da görüntüleyecektir.

width : Kutucuğun genişliğini belirlemek için kullanılır.

height : Kutucuğun yüksekliğini belirlemek için kullanılır.

scrolling : Kutucuk kenarına sürükleme çubuğu eklemek için kullanılır. Scrollbar'ı göstermek için "yes" gizlemek için "no" yazılır.

frameborder : Kutucuğa kenarlık eklemek için kullanılır. "0" ve "1" değerlerini alabilir.

name : Kutucuğu isimlendirmek için kullanılır. Web sayfasına koyduğunuz bir link'in tıklandığında aynı kutucuk içinde görüntülenmesini istiyorsanız, linkin "target" parametresine "iframe" için atadığınız ismi yazın. Sayfanın kutucuk içinde açıldığını göreceksiniz.

id : Kutucuğu CSS ile biçimlendirmek için kullanılır.

Benim iframe ile ilgili bildiklerim bu kadar... Sadece html görüntülemek zorunda değilsiniz demiştim. İsterseniz video da görüntüleyebilirsiniz. İşte size bunu çok güzel bir örneği;

< iframe width="320" height="240" src="http://www.youtube.com/embed/JOddp-nlNvQ" frameborder="0" allowfullscreen > < /iframe >

Bu kodu web sayfanıza ekleyerek Thor filminin fragmanını ziyaretçilerinize izletebilirsiniz. Gördüğünüz gibi iframe son derecede kullanışlı bir tag (kod ya da etiket siz ne derseniz deyin). Bu tagı kullanarak çok güzel tasarımlar yapabilirsiniz. Ziyaretçilerinizin sitede hoşça vakit geçirmesini sağlayabilirsiniz. Hepinize kolay gelsin.  Şimdilik hoşçakalın...

13 Mayıs 2011 Cuma

HTML Kodları ile Web Sayfasına Müzik ve Video Eklemek

Binbir uğraşıyla, özene bezene bir web sayfası hazırladınız ve bu sayfada, ziyaretçiler dolaşırken bir fon müziği çalsın istiyorsunuz. İşte bu durmda HTML'nin < embed > kodu imdadınıza yetişiyor. Bu tagı kullanarak videoları sayfanızda görüntüleyebilir, mp3, waw, wma uzantılı müzik dosyalarını web sayfanıza fon müziği olarak kullanabilirsiniz. Peki ama bu tag nasıl kullanılır? Lafı fazla uzatmadan bu tagın ya da kodun nasıl kullanılacağını bir örnek üzerinde gösterelim,
< embed src="müzik dosyası.mp3" hidden="true" autostart="true" loop="true" >

Şimdi bu tagın içinde geçen parametreleri kısaca anlatalım:

infial_html
src : Film ya da müzik dosyasının konumunu (adresini) belirtmek için kullanılır.

hidden : Mediaplayer eklentisinin görünürlüğünü değiştirmek için kullanılır. true yaparsanız eklenti görünmez false yaparsanız görünür.

autostart : True değerini verirseniz müzik dosyası sayfa yüklenir yüklenmez otomatik olarak çalmaya başlar.

loop : Müziğin kaç kez çalınacağını belirtmek için kullanılır. -1 ya da true değerini verirseniz sürekli çalar. false derseniz bir kez çalar ve durur.

NOT: Eğer amacınız sadece fon müziği koymak isre hidden parametresini true yaparsınız ve bu tagı olduğu gibi < head > < / head > arasına yazarsınız böylece sayfada yer işgal etmemiş olur.
Web Sayfasına Video Eklemek

< embed > tagı web sayfasına video eklemek için de kullanılabilir. Bununla ilgili örnek kodlama şu şekildedir;

< embed src="http://www.youtube.com/v/hY-vXcmpZIw?version=3&hl=en_US&rel=0" width="425" height="349" >

"width" ve "height" parametreleri videonun boyutlandırılması için kullanılır. Burada verdiğim örnek kodu Lady Gaga'nın Poker Face isimli parçasını bloğuma eklemek için kullandım. Keyfini çıkarın !!! :))


8 Mayıs 2011 Pazar

HTML Kodları ile Web Sayfasına Resim Eklemek

Web sayfanızın ziyaretçilerine güzel görünmesi ve site içeriğinin zenginleştirilmesi için, anlatılan konu ile ilgili ya da dekoratif amaçlı resimler mutlaka kullanılmaldır. Genelde web sitelerinde gif, jpeg ve png uzantılı resimler kullanılır.

Web sayfasına resim yerleştirmek için < img > tagı kullanılır. Bu tagın diğer HTML kodları gibi < img ></ img > şeklinde kapatılmasına gerek yoktur. Bu tagın genel kullanımı şöyledir:

< img src="örnekresim.jpg" >

"src" kodu sayfaya ekleyeceğimiz resim dosyasının konumunu, dosyanın nereden ekleneceğini belirtmek için kullanılır. Burada eklenmek istenen resmin konumunun doğru yazıldığından emin olunmalıdır. Aksi takdirde resim görüntülenemez. Konum olarak "src" kodunu başka bir web sayfasındaki resmi eklemek için de kullanabilirsiniz src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivNTPojmcy7JFv_jqsujs-w6BFtZUhL9L3_SWCW4gZZEGqEf_-17TPtaa4p-kuuMmboSTmKeE2SKun4wpXtrcqVo-1TsWiO-7So77B2l2id1LKhjFtYYDbRB9SQ8x3_dej27XB4mNLRKZS/s200/sistine_1600x1200.jpg" bu şeklinde host için ayırdığınız yerden de tasarruf etmiş olursunuz.

Şimdi bu tagı bir örnek üzerinde açıklayalım;

< img border="0" height="150" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNB_sc1YMWh1LVL0Z5RTq6UQGXZMEEM8UpWX1uIIW8bEQ3chmRt-ZplryNF8YAThRC18hOOnh0shdqYs32iMiOFeGbqbrRj8Ybj_r8znXzif8N6owIoPvDdgFPNNueV0RrwmZ-b_pXv6Q/s200/sistine_1280x960.jpg" alt="Sistine" title="Sistine" >

Bu kodlamanın sonucu aşağıdaki gibi görüntülenir,


Sistine

Görüldüğü gibi < img > tagının içinde "src" ile birlikte kullanılan birkaç tane parametre bulunmaktadır. Bunları da açıklayalım,

alt : Resim yerine kullanabileceğiniz alternatif metindir. Genelde resim yükelenemediği zaman ziyaretçilere bilgi vermek için kullanılır. Resme verdiğiniz özel bir isim varsa (bu sattığınız bir ürünün adı olabilir) buraya yazabilirsiniz. alt parametresi arama motorları tarafından kaydedilir. ve sitenizin erişilebilirliğini arttırır.

border : Resme eklemek istediğiniz kenarlığın kalınlığını belirtir.

width : Resmin genişliğini belirlemek için kullanılır.

height : Resmin yüksekliğini belirlemek için kullanılır.

title : Buraya yazdığınız metin ziyaretçi mouse ile resim üzerine geldiğinde görüntülenir.

Stop motion animasyon Çizgi Dışı


İnternet ortamında dolaşırken bulduğum cep telefonu kamerası ve Adobe Premiere programı kullanılarak hazırlanmış Stop Motion tarzı kısa film çalışması