Hareketli Twitter Kuşu Kodu

<div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUbx_rBatTuoHSzWHFC_ItAxMPhZ3YSizGV0eHVutOPsIUJWePW0cpvo_99ijA0nAZZtu_TLuFY_E1vvzrHwOSLwBZXoS9bzeU9ByvaHQ5Gat6N5YwZodRqXyTv1pMTGlDr6DPBJZ3m54D/s1600/social-networks.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="137" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUbx_rBatTuoHSzWHFC_ItAxMPhZ3YSizGV0eHVutOPsIUJWePW0cpvo_99ijA0nAZZtu_TLuFY_E1vvzrHwOSLwBZXoS9bzeU9ByvaHQ5Gat6N5YwZodRqXyTv1pMTGlDr6DPBJZ3m54D/s1600/social-networks.jpg" width="320" /></a></div> Belki bu kodu pek çok sitede görebilirsiniz ama gerçekten çok güzel bir hava katıyor. Tavsiye ederim.<br /> <br /> <textarea style="height: 51px; margin: 2px; width: 310px;"><script type="text/javascript" src="http://twitter-bird.googlecode.com/files/Twitter-terbang.js"></script><br /> <br /> <script type="text/javascript"> var birdSprite="http://twitter-bird.googlecode.com/files/bluetwit.png"; var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li", "h1","h2","h3","h4","p","code","object","a","b","strong","span"); var twitterAccount = "http://Twitter Adresi"; var tweetThisText = "http://Twitter Adresi"; tripleflapInit(); </script><script type="text/javascript"> document.write(unescape </script>

Hareketli Twitter Kuşu Kodu

Belki bu kodu pek çok sitede görebilirsiniz ama gerçekten çok güzel bir hava katıyor. Tavsiye ederim. var birdSprite="http://twitter-bird.googlecode.com/files/bluetwit.png"; var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li", "h1","h2","h3…

Devamı »

Seo Eğitimi Ders 5-İyi Bir Yöntem "Forum"

<div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbgfsR3qJJ5ljFe7JvculdMWLQbntxNlGbIcP7EPET8JfQhR3rpzPZDYgMgsDGgVcI0vwb6muG0IdG1dotyBPe1fJ1QCjVNHK_Sv2BSHmBP7esqC4lx1OK_1dsgbnfP4ra7G1KC6SbEnkv/s1600/indir.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="149" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbgfsR3qJJ5ljFe7JvculdMWLQbntxNlGbIcP7EPET8JfQhR3rpzPZDYgMgsDGgVcI0vwb6muG0IdG1dotyBPe1fJ1QCjVNHK_Sv2BSHmBP7esqC4lx1OK_1dsgbnfP4ra7G1KC6SbEnkv/s1600/indir.jpg" width="200" /></a></div> Son zamanlarda forumda gezinirken pek çok alıntı görüyürum. Ve altınada link koyuyorlar. Bu linkler muhtemelen kendi linkleri. Bunu denemek istediğimde sonucuna şok oldum. Tüm html derslerini paylaştım ve 2000 kişinin düzenli takip ettiğini farkettim. Bu elbette altta linke tıklama olasılığı ve organik ziyaretci kazanma yöntemi. Size demek istediğimi forumlara yararlı bulduğunuz blogları kaydedin ve yayınlayın. Bu mükemmel bir yöntem. Forumda ünlü olursanız veya ünlü iseniz zaten hit tamam demektir. Bu size sadece bir öneri. Temiz ziyaretçi kazandıktan sonra forumdan blogları kaldırmak iyi olur. Bu bir müddet etki ettikten sonra etsini ters çevirebilir. Bu arada linklere izin vermeyen forumlara dikkat!

Seo Eğitimi Ders 5-İyi Bir Yöntem "Forum"

Son zamanlarda forumda gezinirken pek çok alıntı görüyürum. Ve altınada link koyuyorlar. Bu linkler muhtemelen kendi linkleri. Bunu deneme...

Devamı »

Seo Eğitimi Ders 4-Google Webmasters Tools

<div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkfxgtgZ52OZiNHbcs1SCCwm72XQ9dMv8LPDAEb6D8s8Oo6bObE0qayR8KBsDh53stLSRMJ0qQ2jnsj1jqMWHM7WOvYvY3jThKTYkyH0WEWmivER_z8-81FqQUQTFLrdfRjigoyuQ-YS6Z/s1600/indir.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkfxgtgZ52OZiNHbcs1SCCwm72XQ9dMv8LPDAEb6D8s8Oo6bObE0qayR8KBsDh53stLSRMJ0qQ2jnsj1jqMWHM7WOvYvY3jThKTYkyH0WEWmivER_z8-81FqQUQTFLrdfRjigoyuQ-YS6Z/s1600/indir.jpg" /></a></div> Pek çok kişinin bilmediği seo aracı ve ücretsiz olan Google Webmasters Tools ile en önemli hitleri yakalıyabilirsiniz. Gerçi bunun blogger için fazla bir yararı olmasa ble denemek gerekiyor. Özellikle sitemap eklemeliyiz. Çok yakında bununda eğitimine başlıyacağım. Fakat çok yoğun olduğumdan üzgünüm ki geç olucak. Bunun dışında bu sadece google için aramalarda geçerlidir. Bunun Yandex veya Explorer gibi tarayıcılara da okutmak gerekir. Demek istediğim servisleri kullanarak da hit artırma şansınız var.

Seo Eğitimi Ders 4-Google Webmasters Tools

Pek çok kişinin bilmediği seo aracı ve ücretsiz olan Google Webmasters Tools ile en önemli hitleri yakalıyabilirsiniz. Gerçi bunun blogger için fazla bir yararı olmasa ble denemek gerekiyor. Özellikle sitemap eklemeliyiz. Çok yakında bununda eğitimine başlıyacağım. Fakat çok yoğun olduğumdan üzgünü…

Devamı »

Sizden Sorular-Function Nedir?

<div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLMPwCXDP85QNf9Kwt1Jw2nzky-iKlTOAj54t2k9i1o771e-qve13lV3INl3C_ddFbtQpfEn4r7e9G2thGWAZd5JTInWv5dLkxbH8mB1qUZ7aaojVqzfe23qAqgRTfs0Ja99HEJ1PIsoPl/s1600/Red+question+mark+iPad+Air+Wallpapers.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLMPwCXDP85QNf9Kwt1Jw2nzky-iKlTOAj54t2k9i1o771e-qve13lV3INl3C_ddFbtQpfEn4r7e9G2thGWAZd5JTInWv5dLkxbH8mB1qUZ7aaojVqzfe23qAqgRTfs0Ja99HEJ1PIsoPl/s1600/Red+question+mark+iPad+Air+Wallpapers.jpg" width="200" /></a></div> Son zamanlarda en çok karşılaştığım konulardan biri "function". Türkçesi fonksiyon olan bu kelime javascript, php vb. pekçok kodlama veya yazılımda kullanılıyor. Fonksiyon adından da anlaşıldığı gibi bir şeyin kısa yolu. Yani örneğin "Ctrl + C" bir kopyalama fonksiyonudur. İşte bu tür kodlama veya yazılımlarda fonksiyon bir işlemi çalıştırmak için kullanılır. Fonksiyonlar genellikle insanlar tarafından yazılıp çağrılır. Bu çok işe yarar. Özellikle bir şeyi birden fazla kullanacaksanız eğer aynı şey ile sayfayı çöplüğe çevirmek yerine fonksiyon yazıp çağırmanız daha iyi olur.

Sizden Sorular-Function Nedir?

Son zamanlarda en çok karşılaştığım konulardan biri "function". Türkçesi fonksiyon olan bu kelime javascript, php vb. pekçok kodlama veya yazılımda kullanılıyor. Fonksiyon adından da anlaşıldığı gibi bir şeyin kısa yolu. Yani örneğin "Ctrl + C" bir kopyalama fonksiyonudur. İşte bu tür kodlama veya …

Devamı »

Sizden Sorular-Kurulum Dosyası ve Program Karşılaştırması

<div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizWYN8WFswQnmUoyHTWmBhrPh2HE6yUxgTvDLE5lhsBHoKrTQbz69iAmPESpeztthyiWZCXGFg0AmOgFs-kMrwrXU6Wv0oxAfPqTWex7f9QDFrADrxs7LtT8a-1FNztGJqL-BN-Pus7RJo/s1600/Red+question+mark+iPad+Air+Wallpapers.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizWYN8WFswQnmUoyHTWmBhrPh2HE6yUxgTvDLE5lhsBHoKrTQbz69iAmPESpeztthyiWZCXGFg0AmOgFs-kMrwrXU6Wv0oxAfPqTWex7f9QDFrADrxs7LtT8a-1FNztGJqL-BN-Pus7RJo/s1600/Red+question+mark+iPad+Air+Wallpapers.jpg" width="200" /></a></div> Merhaba,<br /> Şu hafta içerisinde bir soru aldım. Ve bu bana neden "Sizden Sorular" diye bir bölüm olmasın dedim. Ve hoşuma gitti. Evet uzatmadan cevabı verelim.<br /> <br /> Yaptığım araştırma üzerinde bu olayda büyüme boyutu genellikle oyun kurulum dosyaları özellikle "BlackBox" oyunlarda bu gerçekleşiyor. Program kurulumlarında bu fazla değil. Bunun nedeni ise aynı nesnenin kısayol oluşturulması yerine kopyalanması. Yani aynı şey birden fazla olarak genellikle oyunlarda oluyor. Eğer kısayol oluşturulsaydı ki oyun yavaşlarmış. Eğer oyun yavaş olsun diyip kısayol oluşturulsun diyorsanız bazı programlar olduğunu sanıyorum. Ama tabi boyutun atması hakkında farklı bir düşünce olarak bağlantı kurulması var. Ama internet bağlantısı olmayan biri için bu geçerli değil. Ve oyun yine de kuruluyor. Bir örnek verelim. Bir "Zıplama" dosyası var. Bu dosya "Space"ye basılınca insanın zıplamasını sağlıyor. Ve bu zıplama işi bütün oyun bölümlerinde kullanılıyor. İşte bu kopyalama işi böyle oluyor. Bu şekilde de oyunun boyutu kurulum dosyası sonrası artıyor. İşte cevap bu!

Sizden Sorular-Kurulum Dosyası ve Program Karşılaştırması

Merhaba, Şu hafta içerisinde bir soru aldım. Ve bu bana neden "Sizden Sorular" diye bir bölüm olmasın dedim. Ve hoşuma gitti. Evet uzatmadan cevabı verelim. Yaptığım araştırma üzerinde bu olayda büyüme boyutu genellikle oyun kurulum dosyaları özellikle "BlackBox" oyunlarda bu gerçekleşiyor. Program…

Devamı »

Css Eğitimi Ders 8-Tablolar

<div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRn6g5w5vuV4vMz1nyOFuw-90T45P85arbtihwjduHirEXC7svCFrFetpdB37bh2wSdieNmSMYuordTTOYwKZZeC9IgVs3ULuJLOkzv3m2oK8H25u7FndeSvezH0HVRp-dq9YeaD_gMGtu/s1600/5035a79ebf516.preview-620.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="116" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRn6g5w5vuV4vMz1nyOFuw-90T45P85arbtihwjduHirEXC7svCFrFetpdB37bh2wSdieNmSMYuordTTOYwKZZeC9IgVs3ULuJLOkzv3m2oK8H25u7FndeSvezH0HVRp-dq9YeaD_gMGtu/s1600/5035a79ebf516.preview-620.jpg" width="200" /></a></div> Merhaba,<br /> Şimdi uzun ve önemli bir konu göreceğiz. Tablolar! Bu konu önemli bir konudur. Çünkü tablo ile yapılan tasarımlar tablo özelliklerine dayanır. Başlayalım.<br /> <h3> Tablolar</h3> <h4> Kenarlık:</h4> <div> Stil belirtmek için "border-style" kullanılır. Özelliklerine göz atalım:</div> <div> <ul> <li>dotted: Çizgili</li> <li>dashed: Kısa Çizgili</li> <li>solid: Çizgi</li> <li>double: Çift Çizgili</li> <li>grove, ridge, inset, outside: Kalın Çizgi (Hepsi Olabilir)</li> </ul> <div> Örnek verelim:</div> </div> <div> <br /></div> <div> .tablo {</div> <div> border-style: double;</div> <div> }</div> <div> <br /></div> <div> Şimdi bir kenarın kalınlığını belirtelim. Kesinlikle önceden bir "border-style" belirtmemiz gerekir. Aksi takdirde çalışmaz. Örneğin:</div> <div> <br /></div> <div> <div> .tablo {</div> <div> border-style: solid;</div> <div> border-width: 2px;</div> <div> }</div> </div> <div> <br /></div> <div> Şimdi de kenarlık rengini belirtelim. Bunda da aynı şekilde önceden "border-style" belirtmemiz gerekir. Örneğin:</div> <div> <br /></div> <div> <div> .tablo {</div> <div> border-style: solid;</div> <div> border-width: 2px;</div> <div> border-color: #FF8000;</div> <div> }</div> </div> <div> <br /></div> <div> Bu şekilde tüm öğrendiğimiz stilleri pekiştirdik.</div> <h4> Genişlik-Yükseklik:</h4> <div> Bu yöntem ile tablonun her hücresine ayrı bir büyüklük veya yükseklik verebiliriz. Örneğin:</div> <div> <br /></div> <div> td.hücre1 {</div> <div> width: 100px;</div> <div> height: 100px;</div> <div> }</div> <div> td.hücre2 {</div> <div> <div> width: 100px;</div> <div> height: 200px;</div> </div> <div> }</div> <h4> Yazı Özellikleri:</h4> <div> Tablonun içindeki yazı özellikleridir. Yine her hücrede tek tek kullanılabilir. "text-aling" yani hiza, "color" yani renk, "background-color" arkaplan rengi gibi özellikleri vardır. Örneğin:</div> <div> <br /></div> <div> <div> .tablo {</div> <div> border-style: solid;</div> <div> border-width: 2px;</div> <div> border-color: #FF8000;</div> <div> text-aling: center;</div> <div> color:  #FF8000;</div> <div> background-color: #EEEEEE;</div> <div> }</div> </div> <div> <br /></div> <div> Bu derslik bu kadar ve önemli bir konuyu atlattık ve daha önemli bir konu olan kenarlıklara geçeceğiz. Zor olsada eğlenceli olacak. Kolay gelsin. Çalışmayı unutmayın.</div>

Css Eğitimi Ders 8-Tablolar

Merhaba, Şimdi uzun ve önemli bir konu göreceğiz. Tablolar! Bu konu önemli bir konudur. Çünkü tablo ile yapılan tasarımlar tablo özelliklerine dayanır. Başlayalım. Tablolar Kenarlık: Stil belirtmek için "border-style" kullanılır. Özelliklerine göz atalım: dotted: Çizgili dashed: Kısa Çizgili solid:…

Devamı »

Css Eğitimi Ders 7-Listeler

<div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRn6g5w5vuV4vMz1nyOFuw-90T45P85arbtihwjduHirEXC7svCFrFetpdB37bh2wSdieNmSMYuordTTOYwKZZeC9IgVs3ULuJLOkzv3m2oK8H25u7FndeSvezH0HVRp-dq9YeaD_gMGtu/s1600/5035a79ebf516.preview-620.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="116" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRn6g5w5vuV4vMz1nyOFuw-90T45P85arbtihwjduHirEXC7svCFrFetpdB37bh2wSdieNmSMYuordTTOYwKZZeC9IgVs3ULuJLOkzv3m2oK8H25u7FndeSvezH0HVRp-dq9YeaD_gMGtu/s1600/5035a79ebf516.preview-620.jpg" width="200" /></a></div> Merhaba,<br /> Bu derste listeleme yaparken özellikleri kullanmayı öğreneceğiz. Şekillendirme, değiştirme vs. Hemen Başlayalım.<br /> <h3> Listeler</h3> <h4> Madde Şekli:</h4> <div> Madde şekillerini 2 yerde kullanırız. Numaralı ve şekilli listeler. Yani "ol" ve "ul". Bir örnek ile madde şekillerini daire, sayıları roman rakamları yapalım:</div> <div> <br /></div> <div> ul {</div> list-style-type: disc;<div> }</div> <div> ol {</div> list-style-type: upper-roman;<div> }</div> <div> <br /></div> <div> Bu stili kullanırsak tüm madde listelerinin başında daire, sayı listelelerinin başında roman rakamları listelenir. Buna pek çok örnek verilebilir.</div> <h4>      Ul Stilleri</h4> <div> <ul> <li>circle: İçi boş daire</li> <li>disc: Daire</li> <li>square: Kare</li> <li>none: Boş</li> </ul> <h4>      Ol Stilleri</h4> </div> <ul> <li>armenian</li> <li>decimal</li> <li>decimal-leading-zero</li> <li>lower-alpha</li> <li>lower-greek</li> <li>lower-latin </li> <li>lower-roman</li> <li>none </li> <li>upper-alpha</li> <li>upper-latin</li> <li>upper-roman</li> </ul> <div> Not: Bunları yazamadım çünkü çoğunu hatırlamıyorum ve alıntı yaptım. Orada da yoktu. Size ödev öğrenin gelin :)</div> <div> <br /></div> <div> Madde şekli yerine resim de kullanabiliriz. Örneğin:</div> <div> <br /></div> ul { <div> list-style-image: url('resim.png'); </div> <div> }</div> <div> <br /></div> <div> Not: Resim yerine gif'de kullanılabilir.</div> <h4> İnside-Outside</h4> <div> Madde işaretinin içinde mi dışında mı olacağıdır. Örneğin:</div> <div> <br /></div> <div> ul { <div> list-style-position: inside; </div> <div> }</div> </div> <div> <br /></div> <div> Bu şekilde madde işareti içeri kısımda başta olacaktır.</div> <div> <br /></div> <div> Bu derslik bu kadar. Çalışın ve ödevi unutmayın. Bu arada tüm "ol" özelliklerini bulana bir süprizim var ;)</div>

Css Eğitimi Ders 7-Listeler

Merhaba, Bu derste listeleme yaparken özellikleri kullanmayı öğreneceğiz. Şekillendirme, değiştirme vs. Hemen Başlayalım. Listeler Madde Şekli: Madde şekillerini 2 yerde kullanırız. Numaralı ve şekilli listeler. Yani "ol" ve "ul". Bir örnek ile madde şekillerini daire, sayıları roman rakamları yapa…

Devamı »

Html Eğitimi-Sonsöz

<div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid8DO53cCid62CqITXc2HvORPmuE6LB9uBUjYEtDowxjjvblogCSZIL-WWMr7KfTvBtuCPniAFLyRKNn0UBiDN4farDOKKFXqat1fVs4VfaWa6tGlLr9E-43TVsFg-gSa-vIqqDo4nfR8/s1600/html.jpeg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid8DO53cCid62CqITXc2HvORPmuE6LB9uBUjYEtDowxjjvblogCSZIL-WWMr7KfTvBtuCPniAFLyRKNn0UBiDN4farDOKKFXqat1fVs4VfaWa6tGlLr9E-43TVsFg-gSa-vIqqDo4nfR8/s1600/html.jpeg" width="165" /></a></div> Html eğitimlerimiz bitti. Ve şimdi sizden daha çok seviniyorum. Çünkü büyük bir çileden kurtuldum. Ama böyle öğrencilerimin olmasıda mükemmel bir duygu. Birde düşünüyorum. Herşeyi öğrenip büyük siteler yapıyorlarmış. Html bitti ve şimdi sıra Css'de. Css ile siteyi daha dinamik ve şekilli, renkli yapabilirsiniz. Çok uzun bir eğitim seti olucak. Yaklaşık 30-40 veya daha fazla olmasını bekliyorum. Kolay gelsin.

Html Eğitimi-Sonsöz

Html eğitimlerimiz bitti. Ve şimdi sizden daha çok seviniyorum. Çünkü büyük bir çileden kurtuldum. Ama böyle öğrencilerimin olmasıda mükemmel bir duygu. Birde düşünüyorum. Herşeyi öğrenip büyük siteler yapıyorlarmış. Html bitti ve şimdi sıra Css'de. Css ile siteyi daha dinamik ve şekilli, renkli ya…

Devamı »

Html Eğitimi Ders 10-Renkler

<div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid8DO53cCid62CqITXc2HvORPmuE6LB9uBUjYEtDowxjjvblogCSZIL-WWMr7KfTvBtuCPniAFLyRKNn0UBiDN4farDOKKFXqat1fVs4VfaWa6tGlLr9E-43TVsFg-gSa-vIqqDo4nfR8/s1600/html.jpeg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid8DO53cCid62CqITXc2HvORPmuE6LB9uBUjYEtDowxjjvblogCSZIL-WWMr7KfTvBtuCPniAFLyRKNn0UBiDN4farDOKKFXqat1fVs4VfaWa6tGlLr9E-43TVsFg-gSa-vIqqDo4nfR8/s1600/html.jpeg" width="165" /></a></div> Merhaba,<br /> Şimdi sürekli kullanacağımız renk kartelasına bir göz atalım.<br /> <h3> <br /></h3> <h3> <br /></h3> <h3> <br /></h3> <h3> <br /></h3> <h3> Renkler</h3> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO3LHhUcvLTHDx1yrImRuFMxxJWbG0WD35hq7nvgJSg85VsVs0BvE6wAWDCpiOIPmwv2X0fo-LEGwMtGuDjygcgsw8MbR5tj_E-T56Pj1EIm_4tnXXUM1ufER5vl5T1LwzMR91ShgYxFoe/s1600/WEB-HTML-CSS-RENK-KODLARI.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="587" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO3LHhUcvLTHDx1yrImRuFMxxJWbG0WD35hq7nvgJSg85VsVs0BvE6wAWDCpiOIPmwv2X0fo-LEGwMtGuDjygcgsw8MbR5tj_E-T56Pj1EIm_4tnXXUM1ufER5vl5T1LwzMR91ShgYxFoe/s1600/WEB-HTML-CSS-RENK-KODLARI.png" width="640" /></a></div> <div> <br /></div>

Html Eğitimi Ders 10-Renkler

Merhaba, Şimdi sürekli kullanacağımız renk kartelasına bir göz atalım. Renkler …

Devamı »

Html Eğitimi Ders 9-Arkaplan

<div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid8DO53cCid62CqITXc2HvORPmuE6LB9uBUjYEtDowxjjvblogCSZIL-WWMr7KfTvBtuCPniAFLyRKNn0UBiDN4farDOKKFXqat1fVs4VfaWa6tGlLr9E-43TVsFg-gSa-vIqqDo4nfR8/s1600/html.jpeg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid8DO53cCid62CqITXc2HvORPmuE6LB9uBUjYEtDowxjjvblogCSZIL-WWMr7KfTvBtuCPniAFLyRKNn0UBiDN4farDOKKFXqat1fVs4VfaWa6tGlLr9E-43TVsFg-gSa-vIqqDo4nfR8/s1600/html.jpeg" width="165" /></a></div> Merhaba,<br /> Bayağı bir yol kat ettik gibi görünüyor. Şimdi css olmadan önce arkaplan değiştirme şeklini göreceğiz. Aslında hala kullanılıyor. (Css nedir diyenler için html kodlarını renklendirme düzenleme vs. işe yarar)<br /> <h3> Arkaplan</h3> <div> Arkaplan rengini iki şekilde belirtiriz. 1.'si ingilizce renk ismi olarak. 2.'si renk kodu kullanarak. Örneklere bakalım:</div> <div> <br /></div> <div> <br /></div> <body bgcolor="yellow"><br /> <body bgcolor="#000000"><div> <br /></div> <div> Bunun dışında arkaplan'a resim eklemek için:</div> <div> <br /></div> <div> <body background="arkaplan.jpg"></div> <div> <br /></div> <div> Bu sadece küçük bir düzenleme. Css kısmında daha iyi düzenlemelere başvuracağız. Kısa ve kolay bir ders oldu. Ama yine de tekrar edelim. Kolay gelsin.</div>

Html Eğitimi Ders 9-Arkaplan

Merhaba, Bayağı bir yol kat ettik gibi görünüyor. Şimdi css olmadan önce arkaplan değiştirme şeklini göreceğiz. Aslında hala kullanılıyor. (Css nedir diyenler için html kodlarını renklendirme düzenleme vs. işe yarar) Arkaplan Arkaplan rengini iki şekilde belirtiriz. 1.'si ingilizce renk ismi olarak…

Devamı »

Html Eğitimi Ders 8-Resimler

<div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid8DO53cCid62CqITXc2HvORPmuE6LB9uBUjYEtDowxjjvblogCSZIL-WWMr7KfTvBtuCPniAFLyRKNn0UBiDN4farDOKKFXqat1fVs4VfaWa6tGlLr9E-43TVsFg-gSa-vIqqDo4nfR8/s1600/html.jpeg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid8DO53cCid62CqITXc2HvORPmuE6LB9uBUjYEtDowxjjvblogCSZIL-WWMr7KfTvBtuCPniAFLyRKNn0UBiDN4farDOKKFXqat1fVs4VfaWa6tGlLr9E-43TVsFg-gSa-vIqqDo4nfR8/s1600/html.jpeg" width="165" /></a></div> Merhaba,<br /> Şimdi önemli bir konu üzerinde duracağız. Resim eklemek ve düzenlemek gibi. Çok kolay bir ders olacak.<br /> <h3> Resimler</h3> <div> İlk olarak bir resm eklemeyi gösterelim:</div> <div> <br /></div> <img src="http://resimage.net/img/yavru-hayvan-resimleri/yavru-kedi.jpg" alt="Resim"><br /> <br /> "img" kullanarak bir resim ekleyeceğimizi anladık ve "src" ile köprü yani link oluşturduk. Sonra "alt" ile üzerine gelice çıkacak yazıyı belirledik. Önizleyelim:<br /> <br /> <br /> <img alt="Resim" height="300" src="http://resimage.net/img/yavru-hayvan-resimleri/yavru-kedi.jpg" width="400" /><br /> <br /> Büyük bir resim değil mi? Biraz küçültsek iyi olur gibi. Hadi küçültelim:<br /> <br /> <img width="100" height="125" src="http://resimage.net/img/yavru-hayvan-resimleri/yavru-kedi.jpg" alt="Resim"><br /> <br /> Şimdi önizleyelim:<br /> <br /> <img alt="Resim" height="100" src="http://resimage.net/img/yavru-hayvan-resimleri/yavru-kedi.jpg" width="125" /><br /> <br /> Daha güzel oldu değil mi? Şimdi de "border" yani çerçeve kalınlığını ayarlayalım. Örnek olarak kalınlığı "5" verelim:<br /> <br /> <img border="5" width="100" height="125" src="http://resimage.net/img/yavru-hayvan-resimleri/yavru-kedi.jpg" alt="Resim"><br /> <br /> Önizleyelim:<br /> <br /> <img alt="Resim" border="5" height="100" src="http://resimage.net/img/yavru-hayvan-resimleri/yavru-kedi.jpg" width="125" /><br /> <br /> Şimdi gördüğünüz gibi bir çerçeve oluşturduk. Olmamasını istiyorsan "o" değerini vermemiz gerekir. Peki bu da tamam. Şimdi resmimi ortalamak istiyorum. Pek çok tag'de özellik olarak kullanılan "aling" yani hiza özelliğini kullanıcam. Örneğin:<br /> <br /> <img aling="center" border="5" width="100" height="125" src="http://resimage.net/img/yavru-hayvan-resimleri/yavru-kedi.jpg" alt="Resim"><br /> <br /> Önizlemek isterdim ama blogger div etiketleri ile çalıştığından bu durumu önizlemeyecektir. Bunun dışında "aling" özellikleri şunlardır:<br /> <br /> <ul> <li>center: Orta</li> <li>right: Sağ</li> <li>left: Sol</li> </ul> <div> Şimdilik bu kadar. Çalışmayı unutmayın. Kolay Gelsin.</div>

Html Eğitimi Ders 8-Resimler

Merhaba, Şimdi önemli bir konu üzerinde duracağız. Resim eklemek ve düzenlemek gibi. Çok kolay bir ders olacak. Resimler İlk olarak bir resm eklemeyi gösterelim: "img" kullanarak bir resim ekleyeceğimizi anladık ve "src" ile köprü yani link oluşturduk. Sonra "alt" ile üzerine gelice çıkacak yazıyı …

Devamı »

Html Eğitimi Ders 7-Form Oluşturma

<div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid8DO53cCid62CqITXc2HvORPmuE6LB9uBUjYEtDowxjjvblogCSZIL-WWMr7KfTvBtuCPniAFLyRKNn0UBiDN4farDOKKFXqat1fVs4VfaWa6tGlLr9E-43TVsFg-gSa-vIqqDo4nfR8/s1600/html.jpeg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid8DO53cCid62CqITXc2HvORPmuE6LB9uBUjYEtDowxjjvblogCSZIL-WWMr7KfTvBtuCPniAFLyRKNn0UBiDN4farDOKKFXqat1fVs4VfaWa6tGlLr9E-43TVsFg-gSa-vIqqDo4nfR8/s1600/html.jpeg" width="165" /></a></div> Merhaba,<br /> Bütün herşeyi oluşturduktan sonra önemli bir konu olan form nesnelerine başvuralım. Çok kolay ama bazen karışabilen bir konu olan bu ders size kolay gelecek. Eminim.<br /> <h3> Formlar</h3> <div> Formlarda açma etiketi "input" olarak bilir ve türünü ise "type" değerine özellik vererek belirleriz. İlk olarak "text" yani yazı özelliğini göreceğiz. Sonradan "name" ile forma isim verebilir, "size" ile büyüklüğü belirtebilirsiniz. Örneğin:</div> <div> <br /></div> <form name="giris" action="giris.asp" method="post"><br /> <b>Kullanıcı Adı:</b><br /><br /> <input type="text" name="kullaniciadi" size="12"><br /><br /><br /> <b>Şifre:</b><br /><br /> <input type="password" name="sifre" size="12"><br /><br /><br /> <input type="submit" name="giris" value="Giriş"><br /><br /><br /> </form><br /> <br /> <form action="giris.asp" method="post" name="giris"> Şimdi formu inceleyelim:<br /> <ul> <li>name="isim": Form veya bir bölümüne isim vermek için kullanılır. Değerlendirmede bize yardımcı olur.</li> <li>action="dosya": Form bilgilerinin gönderileceği veya test edileceği dosyadır.</li> <li>method="post": Hangi şekilde dosyaya gideceğidir.. POST olursa bilgiler görünmez, GET olursa form nesnelerine göre dinamik şekilde adreste görünür.</li> <li>type="tür": Kullanacağımız form nesnesidir. Burada "text" yazı kutusu, "password" şifre kutusu ve "sumbit" ile gönderme düğmesi oluşturmuş oluruz.</li> <li>size="boyut": Form nesnelerinin uzunluğunu belirtip sadece "text" ve "password" özelliklerinde kullanılır.</li> <li>value="deger": Butonda ya da metin kutusunda yazılacak değerler bu kısımda belirtilir.</li> </ul> <div> Bunları öğrendikten sonra örneklere devam edelim. Bir yorum kutusu örneği (Çalışmaz ve sadece örnek önizlemedir):</div> <div> <br /></div> <div> <form name="yorum" action="yorum.asp" method="post"><br /> <b>Adınız Soyadınız:</b><br /><br /> <input type="text" name="adsoyad" size="24"><br /><br /><br /> <b>Yorum:</b><br /><br /> <textarea  cols="36" rows="4">Yorumunuz...</textarea><br /><br /><br /> <input type="submit" name="gonder" value="Gönder"><br /><br /><br /> </form></div> </form> <form action="yorum.asp" method="post" name="yarum"> Burada "textarea"yı bir "type" değeri içinde kullanmadık. Çünkü bu textarea bir form nesnesi olmayıp sadece içinde kullanılır. Özellikleri:<br /> <br /> <ul> <li>cols="sutun sayısı"</li> <li>rows="satır sayısı"</li> </ul> <div> Bunun dışında "textarea" ve kapanma etiketi arasına içinde bulunan değer yazılır. Şimdi sadece bir tanesi seçilebilen radyo düğmeleri yapalım:</div> <div> <br /> <b> Öğrenmek İstediğiniz Programlama Çeşidi Nedir: </b><br /><br /></div> <div> <input type="radio" name="kod" value="html"> Html <br /></div> <div> <input type="radio" name="kod" value="css"> Css <br /></div> <div> <div> <input type="radio" name="kod" value="php"> Php <br /></div> <div> <input type="radio" name="kod" value="asp"> Asp <br /></div> </div> </form> Eğer denerseniz sadece bir tanesinin seçilebildiğini görebilirsiniz. Gördüğünüz gibi "type" değerini "radio" olarak verdik. Şimdi birden çok seçilebilen seçenekler oluşturalım:<br /> <br /> <b> Bildiğiniz Programlama Çeşitleri Nelerdir: </b><br /><br /><br /> <input type="checkbox" name="_html" value="html"> Html <br /><br /> <input type="checkbox" name="_css" value="css"> Css <br /><br /> <input type="checkbox" name="_php" value="php"> Php <br /><br /> <input type="checkbox" name="_asp" value="asp"> Asp <br /><br /> <br /> <br /> Denediyseniz birden fazla seçenek seçebiliyorsunuz. Burada da "type" değerini "checkbox" yaptık. Şimdi açılır seçim kutusu yapalım:<br /> <br /> <select name="kodlar"><br /> <option value="html"> Html </option><br /> <option value="css"> Css </option><br /> <option value="php"> Php </option><br /> <div> <option value="asp"> Asp </option><br /> </select></div> <div> <br /></div> Şimdi ise bambaşka bir seçenek kullandık. Bunu ve diğerlerini "form" tagları arasına koyabiliriz. Bu arada açılır seçim kutusunda ilk değer herzaman ilk olarak gözüken değerdir.<br /> <br /> Bu derslik bu kadar ve form oluşturmayı tam olarak öğrendik. İletişim formu bu bilgi ile oluşturulmaz. Bundan dolayı çalışan form oluşturmak için diğer sitelerden örnekeri inceleyin. Kolay Gelsin. Emek karşılığı ve soruları yorumda belirtin.

Html Eğitimi Ders 7-Form Oluşturma

Merhaba, Bütün herşeyi oluşturduktan sonra önemli bir konu olan form nesnelerine başvuralım. Çok kolay ama bazen karışabilen bir konu olan bu ders size kolay gelecek. Eminim. Formlar Formlarda açma etiketi "input" olarak bilir ve türünü ise "type" değerine özellik vererek belirleriz. İlk olarak "te…

Devamı »

Css Eğitimi Ders 6-Bağlantı Özellikleri

<div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRn6g5w5vuV4vMz1nyOFuw-90T45P85arbtihwjduHirEXC7svCFrFetpdB37bh2wSdieNmSMYuordTTOYwKZZeC9IgVs3ULuJLOkzv3m2oK8H25u7FndeSvezH0HVRp-dq9YeaD_gMGtu/s1600/5035a79ebf516.preview-620.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="116" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRn6g5w5vuV4vMz1nyOFuw-90T45P85arbtihwjduHirEXC7svCFrFetpdB37bh2wSdieNmSMYuordTTOYwKZZeC9IgVs3ULuJLOkzv3m2oK8H25u7FndeSvezH0HVRp-dq9YeaD_gMGtu/s1600/5035a79ebf516.preview-620.jpg" width="200" /></a></div> Merhaba,<br /> Yazı stillerini belirledikten sonra şimdi bağlantılarla oynayalım.<br /> <h3> Bağlantılar</h3> <div> Bağlantılar ziyaret edilmiş, edilmemiş gibi bazı özelliklerle yönetilir.</div> <br /> <ul> <li>a:link - Normal Görünüm</li> <li>a:visited - Ziyaret edilmiş Görünüm</li> <li>a:hover - Fare İle Üzerinde Durulduğunda Görünüm</li> <li>a:active - Tıklanılan Anda Görünüm</li> </ul> <div> Örneğin:</div> <div> <br /></div> a:link {color: blue;} /*Normal*/<br /> <div> a:visited {color: red;} /*Ziyaret Edilmiş*/ </div> <div> a:hover {color: red;} /*Fare Üzerindeyken*/ </div> <div> a:active {color: orange;} /*Aktif İken*/</div> <div> <br /></div> <div> Bunları  kullanırken şunlara dikkat etmeliyiz:</div> <div> <br /></div> <div> <ul> <li>a:hover her zaman a:link ve a:visited'den sonra gelmeli.</li> <li>a:active her zaman a:hover'dan sonra gelmeli.</li> </ul> </div>

Css Eğitimi Ders 6-Bağlantı Özellikleri

Merhaba, Yazı stillerini belirledikten sonra şimdi bağlantılarla oynayalım. Bağlantılar Bağlantılar ziyaret edilmiş, edilmemiş gibi bazı özelliklerle yönetilir. a:link - Normal Görünüm a:visited - Ziyaret edilmiş Görünüm a:hover - Fare İle Üzerinde Durulduğunda Görünüm a:active - Tıklanılan Anda Gö…

Devamı »

Css Eğitimi Ders 5-Yazı

<div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRn6g5w5vuV4vMz1nyOFuw-90T45P85arbtihwjduHirEXC7svCFrFetpdB37bh2wSdieNmSMYuordTTOYwKZZeC9IgVs3ULuJLOkzv3m2oK8H25u7FndeSvezH0HVRp-dq9YeaD_gMGtu/s1600/5035a79ebf516.preview-620.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="116" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRn6g5w5vuV4vMz1nyOFuw-90T45P85arbtihwjduHirEXC7svCFrFetpdB37bh2wSdieNmSMYuordTTOYwKZZeC9IgVs3ULuJLOkzv3m2oK8H25u7FndeSvezH0HVRp-dq9YeaD_gMGtu/s1600/5035a79ebf516.preview-620.jpg" width="200" /></a></div> Merhaba,<br /> Bir önceki ders ile arkaplanınızı belirttiyseniz şimdi biraz yazılarla oynayalım.<br /> <h3> Yazı Rengi</h3> <div> Aynı arkaplanda yaptığımız gibi ama biraz farklı yazı rengi belirleyelim. Örneğin:</div> <div> <br /></div> a {<br /> <div> color: white; </div> <div> }</div> <div> <br /></div> <div> Bu stil ile bütün a kümelerinin beyaz olmalarını sağladık.</div> <h3> Yazı Hizası</h3> <div> Normalde kullandığımız sağda, solda ve ortada özelliklerini kullanalım. Örneğin:</div> <div> <br /></div> a {<br /> <div> text-align: justify; </div> <div> }</div> <div> <br /></div> <div> Bu sayede bütün a kümelerinin tam sağ ve sola dayanmasını sağladık. Bütün özellikleri görelim:<br /> <ul> <li>left : Sol</li> <li>right : Sağ</li> <li>center : Orta</li> <li>justify : Tam</li> </ul> <h3> Yazı Dekorasyonu</h3> </div> <div> Bir yazıdaki dekorasyonları kaldırmak için kullanılır. "none" değeri hayır anlamındadır. Örneğin:</div> a {<br /> <div> text-decoration: none; </div> <div> }</div> <div> <br /></div> <div> Bu şekilde tüm dekorasyonlar kalkar.</div> <h3> Yazıda İndent</h3> <div> İndent özelliği başlamadan önce başta bırakılan boşluktur. Örneğin:</div> <div> <br /></div> p {<br /> <div> text-indent: 50px; </div> <div> }</div> <div> <br /></div> <div> Bu sayede paragraf başlamadan 50px boşluk bırakabiliriz.</div> <div> <br /></div> <div> <h3> Yazıda Spacing</h3> <div> Yazıda spacing kelime ve harf arasında boşluk oluştumak amaçlı kullanılır. 2'ye ayrılır.</div> <h4>      Letter-Spacing</h4> <div> Harfler arasında boşluğu belirtir. "px" olarak belirtilebilir.</div> <h4>      Word-Spacing</h4> <div> Kelimeler arasında boşluğu belirtir. "px" olarak belirtilebilir.<br /> <h3> Yazı Fontu</h3> </div> </div> <div> Font belirlemek için font-family özelliği kullanılır. Örneğin:</div> <div> <br /></div> <div> a {</div> <div> font-family: Times New Roman;</div> <div> }</div> <div> <br /></div> <div> Bu şekilde yazının "Times New Roman"  olmasını sağladık.</div> <h3> Yazı Büyüklüğü</h3> <div> Yazı büyüklüğü belirlerken font-size özelliği kullanılır. Örneğin:</div> <div> <br /></div> <div> a {</div> <div> font-size: 12pt;</div> <div> }</div> <div> <br /></div> <div> Burada punto dışında büyüklük şekilleri kullanabiliriz. Örneğin "px".</div> <h3> Yazı Özellikleri</h3> <div> Yazı özelliği kullanarak yazıyı bold, italik yapabiliriz. Örneğin:</div> <div> a {</div> <div> font-style: italic;</div> <div> font-weight: bold;</div> <div> }</div> <div> <br /> Yazıları normal haline getirmek için ise "normal" ifadesini kullanırız.<br /> <br /></div> <div> Daha pek çok örnek verilebilir fakat şimdilik bunları bilmeniz yeterli.</div>

Css Eğitimi Ders 5-Yazı

Merhaba, Bir önceki ders ile arkaplanınızı belirttiyseniz şimdi biraz yazılarla oynayalım. Yazı Rengi Aynı arkaplanda yaptığımız gibi ama biraz farklı yazı rengi belirleyelim. Örneğin: a { color: white;  } Bu stil ile bütün a kümelerinin beyaz olmalarını sağladık. Yazı Hizası Normalde kullandığımız…

Devamı »

Css Eğitimi Ders 4-Arkaplan

<div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjltbWtZqeFa5pWOUTV-FTkP24u1GNrNR8FcyETtPlNEvEUCBJA69lLP5il7xx8SIOFdhaZ26AYZ6czdlNo9GCHgAabJO_68c-wqiRjdwZ2YI_hDFXazeYVA5ze96ziAazjdy7FcefsrVTL/s1600/5035a79ebf516.preview-620.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="116" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjltbWtZqeFa5pWOUTV-FTkP24u1GNrNR8FcyETtPlNEvEUCBJA69lLP5il7xx8SIOFdhaZ26AYZ6czdlNo9GCHgAabJO_68c-wqiRjdwZ2YI_hDFXazeYVA5ze96ziAazjdy7FcefsrVTL/s1600/5035a79ebf516.preview-620.jpg" width="200" /></a></div> Merhaba,<br /> Şuan itibariyle css kullanım örneklerine başlıyoruz. İlk olarak arkaplan ile başlayalım.<br /> <h3> Arkaplan Rengi</h3> <div> Normalde şimdi renklerin nasıl kullandığını anlatmak isterdim fakat bu bilindik bir şey. Bunu kullanarak öğreniceksiniz. Zaten ccs'nin temeli renklerdir. Bir örnek yapalım:</div> <div> <br /></div> body { <div> background-color: yellow; </div> <div> }</div> <div> <br /></div> <div> Burada arka plan renginin yellow (sarı) olmasını sağladık. Bunun yerine kodlama kullanabiliriz. #'den sonra gelen renk kodları da burada kullanılabilir.</div> <h3> Arkaplan Resmi</h3> <div> Eğer arkaplana bir resim eklemek istiyorsak bu işlemi kullanırız. Ve zaten genellikle bu kullanılır. Ya adres yoluyla ya da hosting'te resim adı ile bağlantı kurulur Örneğin:</div> <div> <br /></div> <div> body { <br />background-image: url('image.jpg'); <br /><div> }</div> </div> <div> <br /></div> <div> Bu şekilde "url" ile ya köprü bağlantısı ya da "image.jpg" kısmı ile sitede bulunan bir resmi ekleyebiliriz.</div> <h3> Arkaplan Repeat (Döşeme)</h3> <div> Yüklediğiniz arkaplan resmi eğer tam arka plana sığmıyor ise o zaman repeat özelliğine başvurulur. Yani resim tekrar ederek döşenir. Örneğin:</div> <div> <br /></div> body {<div>  background-image: url('image.jpg'); </div> <div> background-repeat: no-repeat; </div> <div> }</div> <div> <br /></div> <div> Repeat özelliğinin değerleri:</div> <div> <ul> <li>no-repeat : Tekrar edilmeyecektir</li> <li>repeat : Tekrarlanacaktır / döşenecektir</li> <li>repeat-x : Sadece sağa doğru tekrar edecektir</li> <li>repeat-y : Sadece aşağı doğru tekrar edecektir</li> </ul> <div> Bundan da anlayacağımız gibi repeat özelliği küçük arkaplan resimleri için önemlidir.</div> <h3> Arkaplan Attachment (Sabitlik)</h3> <div> Bir arkaplan resminin sabitliğini belirlemek istiyorsak bu özelliğe fixed değeri veririz. Örneğin:</div> <div> <br /></div> body { </div> <div> background-image: url('image.jpg');</div> <div> background-attachment: fixed; </div> <div> }<h3> Arkaplan Position</h3> <div> Eğer arkaplanı "no-repeat" yani tekrar etmeyecek özelliği kattıysak bu resmin nereye hizalancağını belirleyebiliriz. Örneğin:</div> <div> <br /></div> body { </div> <div> background-image: url('image.jpg'); </div> <div> background-repeat: no-repeat; </div> <div> background-position: left top; </div> <div> }</div> <div> <br /></div> <div> Burada left: sol, top: üst yani sol üst anlamındadır.</div> <h3> Arkaplan Belirmenin Kısa Yolu</h3> body { <div> background: #000000 veya url('image.jpg') no-repeat left top; </div> <div> }<div> <div> <br /></div> </div> </div> <div> Bu şekilde uzun bir kodu kısaltabilirsiniz.</div>

Css Eğitimi Ders 4-Arkaplan

Merhaba, Şuan itibariyle css kullanım örneklerine başlıyoruz. İlk olarak arkaplan ile başlayalım. Arkaplan Rengi Normalde şimdi renklerin nasıl kullandığını anlatmak isterdim fakat bu bilindik bir şey. Bunu kullanarak öğreniceksiniz. Zaten ccs'nin temeli renklerdir. Bir örnek yapalım: body {  backg…

Devamı »

Mysql Eğitimi Ders 2-Veritabanı Oluşturma

<div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4_0PgxTUaKWpgqYTk9TaqBFYBgemrEUexotLfUAuiLNrrOiAkcvMljVwQ_nxpgu9VrxFDGiyzNQRPbDMS0JjRceut1jXIk84wSoq4TYfH6aGCu_8R5mf-n1NJZzaisaIWwajWGRRrUSRz/s1600/images.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4_0PgxTUaKWpgqYTk9TaqBFYBgemrEUexotLfUAuiLNrrOiAkcvMljVwQ_nxpgu9VrxFDGiyzNQRPbDMS0JjRceut1jXIk84wSoq4TYfH6aGCu_8R5mf-n1NJZzaisaIWwajWGRRrUSRz/s1600/images.jpg" width="200" /></a></div> Merhaba,<br /> Şimdi çok basit bir konu olan veritabanı oluşturmayı göreceğiz. Burada sadece oluşturma gösterilecek. Düzenleme veya veriatama anlatılmayacak. Onlar çok yakında. Bu arada Mysql nasıl okunur öğrenelim :) May-Sı-Kul Aferim :)<br /> <h3> Veritabanı Oluşturma</h3> <div> İlk olarak bilmeyenler için anlatalım. Veritabanı birgilerin sql (Tablo)ların saklandığı yerdir. İçine bilgi atayıp, bilgi ediniriz. İşte bu veritabanını kodla oluşturmak için:</div> <div> <br /></div> CREATE DATABASE veritabani;<div> <br /></div> <div> Burada "veritabani" adlı bir veritabanı oluşturduk. Peki bunu nasıl görüntüleriz. Yani önizleriz:</div> <div> <br /></div> SHOW DATABASES;<div> <br /></div> <div> +----------------+</div> <div> | Database           | </div> <div> +----------------+</div> <div> | veritabani           | </div> <div> | mysql                 |</div> <div> +----------------+<div> <br /></div> <div> Bu komut ile sql tablosunu listeleriz ve şimdi gördüğünüz gibi liste bu şekilde gözüküyor.</div> </div> <div> <br /></div> <div> Bu derslik de bukadar. Bir sonraki derste biraz karışık ama kolay bir ders olan tablo oluşturmayı göreceğiz. Daha sonra veri ekleyip alıp tabloyla oynamaya başlayacağız. Kolay gelsin.</div>

Mysql Eğitimi Ders 2-Veritabanı Oluşturma

Merhaba, Şimdi çok basit bir konu olan veritabanı oluşturmayı göreceğiz. Burada sadece oluşturma gösterilecek. Düzenleme veya veriatama anlatılmayacak. Onlar çok yakında. Bu arada Mysql nasıl okunur öğrenelim :) May-Sı-Kul Aferim :) Veritabanı Oluşturma İlk olarak bilmeyenler için anlatalım. Verita…

Devamı »

Mysql Eğitimi Ders 1-Komutlar

<div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4sfXUbBrd0tLWHWZMSxPTnfjKFoM-zbP7KMBZT01Bgmq8T1JJ4B997FXzj_ZOzraUXyK9rEp0fiwi4lA7TiQpF_d6mCLsUywZ4EW8yc4OEaofRCrV7wNYYCxqEZPweKK429aTsz7s9yag/s1600/images.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4sfXUbBrd0tLWHWZMSxPTnfjKFoM-zbP7KMBZT01Bgmq8T1JJ4B997FXzj_ZOzraUXyK9rEp0fiwi4lA7TiQpF_d6mCLsUywZ4EW8yc4OEaofRCrV7wNYYCxqEZPweKK429aTsz7s9yag/s1600/images.jpg" width="200" /></a></div> Merhaba,<br /> Şuandan itibaren mysql eğitimlerine başlıyoruz. Tablo kullanım açısından önemli olan mysql örnek olarak php ile üyelik sistemi yapabilirsiniz. Hemen başlayalım.<br /> <h3> Komutlar</h3> <div> Şimdi ilk olarak kuralları öğrenelim. Her komutu yazarken uymamız gereken kurallar şunlar:</div> <div> <div> <br /></div> </div> <div> <ul> <li>Her komutun sonuna ; koymalıyız.</li> <li>Komutlarda iç sorgu yaparken ( ve ) kullanırız.</li> <li>Değişkenler " veya ' aralarına alınır.</li> </ul> <h4> Açıklama Yazma</h4> </div> <div> <ul> <li># Açıklama</li> <li>-- Açıklama</li> <li>/* Açıklama<br />Açıklama Satır 2<br />Açıklama Satır 3*/</li> </ul> <div> Bu ders kısa ve öz. Burada ana şeyleri anlattık ve bir sonraki ders veritabanı oluşturmayı göreceğiz. Yine kısa olucak.</div> </div>

Mysql Eğitimi Ders 1-Komutlar

Merhaba, Şuandan itibaren mysql eğitimlerine başlıyoruz. Tablo kullanım açısından önemli olan mysql örnek olarak php ile üyelik sistemi yapabilirsiniz. Hemen başlayalım. Komutlar Şimdi ilk olarak kuralları öğrenelim. Her komutu yazarken uymamız gereken kurallar şunlar: Her komutun sonuna ; koymalıy…

Devamı »

Javascript Eğitimi Ders 6-if,Else,Else İf ve Merdivenler

<div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijae9Q1k8gYP8_TEBZbBoBZhjOgKFQi7aDxLIOEE0_OmMSFdfVrXTjyBMJ0MZOuiVXvJOrDgYGbmgrhltw6zu4uxa7xycbtWfjnQ8Pbj-qoiol289A1nKihYcmX8axpgY_8GcQiQUhPHHF/s1600/JavaScript-logo.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijae9Q1k8gYP8_TEBZbBoBZhjOgKFQi7aDxLIOEE0_OmMSFdfVrXTjyBMJ0MZOuiVXvJOrDgYGbmgrhltw6zu4uxa7xycbtWfjnQ8Pbj-qoiol289A1nKihYcmX8axpgY_8GcQiQUhPHHF/s1600/JavaScript-logo.png" width="200" /></a></div> Bir şart olşuturma ve boolean ile şart doğru ise değişkene true, yanlış ise değişkene false değerini vermedir. Şimdi incelemeye başlayalım.<br /> <h3> if</h3> <div> Söz dizimine bakalım:</div> <div> <br /></div> <div> if (şart) {</div> <div> //şart true değerini verirse yani doğru ise çalışacak kod grubu</div> <div> }</div> <div> <br /></div> <div> Bu komut sadece şart doğru ise çalışır. DOğru değil ise hiçbir şey yapılmaz. (Yani true değeri vermelidir) Örneğin:</div> <div> <br /></div> <div> var a = 12;</div> <div> if (a>9 && a<100) {</div> <div> console.log("a 2 basamaklı");</div> <div> }</div> <div> <br /></div> <div> Bu örnekte ">" operatörü yani büyüktür ve "<" operatörü yani küçüktür ile a (12) 9'dan büyük ve 10'den küçükse "a 2 basamaklı" yazısının yazılması istenilmiştir. Dolayısıyla yazar.</div> <div> <br /></div> <div> Not:"consolo.log" kafanızı karıştırmasın. Kullandıkça öğrenirsiniz. Ne diye yine sorarsanız şimdilik bir şeylerr yazmak olarak anlayın.</div> <div> <br /></div> <h3> if...Else</h3> <div> if'i sadece true değeri alınırsa kullanıyorduk. Peki false değeri için ne kullanacağız. Tam bu kısımda else anahtarı devreye giriyor. Söz dizimini inceleyelim:</div> <div> <br /></div> <div> <div> if (şart) {</div> <div> //şart true değerini verirse yani doğru ise çalışacak kod grubu</div> <div> }else{</div> </div> <div> //şart false değerini verirse yani yanlış ise çalışacak kod grubu</div> <div> }</div> <div> <br /></div> <div> Bu yapıda true değeri verilirse if kapsamındaki kodlar, false değerini verirse else kapsamındaki kodlar çalışacaktır. Örneğin:</div> <div> <br /></div> <div> <div> var a = 7;</div> <div> if (a%2==0) {</div> <div> console.log("a çift sayı");</div> <div> }else{</div> </div> <div> console.log("a tek sayı");</div> <div> }</div> <div> <br /></div> <div> Bu durumda ekrana "a tek sayı" yazılır. Çünkü burada a'nın 2'ye bölümünden kalanın 0 olup olmadığı kontrol ediliyor. Kalan 0 olmadığından false değeri üretilip else kapsamındaki kodlar çalışır.</div> <h3> if...Else if</h3> <div> Söz dizimini inceleyelim:</div> <div> <br /></div> <div> <div> <div> if (şart1) {</div> <div> //şart1 true değerini üretirse çalışacak kod grubu</div> <div> }else if (şart2){</div> </div> <div> //şart1 false değerini, şart2 true değerini üretirse çalışacak kod grubu</div> <div> }</div> </div> <div> <br /></div> <div> Else if yapısı ondan önce gelen if veya else if false değerini üretirse çalışır. Burada şart1 doğru ise if kapsamındaki kodlar çalışıp else if kapsamındaki kodlar es geçilir. Eğer şart1 false değerini üretirse else if'e bakılır ve true değerin üretirse else if kapsamındaki kodlar çalışır, aksi takdirde false değerini üretirse yine es geçilir. Ve bu durumda hiç bir kod çalışmaz. Örneğe bakalım:</div> <div> <br /></div> <div> <div> <div> var a = 5;</div> <div> if (a<0) {</div> <div> console.log("a sayısı negatif");</div> <div> }else if (a>0){</div> </div> <div> console.log("a sayısı pozitif");</div> <div> }</div> </div> <div> <br /></div> <div> Burada ekrana "a sayısı pozitif" yazar. Çünkü burada pozitif ve negatiflik test için 0'dan büyük veya küçük olduğu test edilmiş. Dolayısıyla ilk olarak "a<0" şartı ile false değeri üretilmiş ve else if yapısına bakılmış. Daha sonra "a>0" ile true değeri üretilip "a sayısı pozitif" yazılmış.</div> <div> <br /></div> <div> <b>Not: Burada "console.log kullandıktan sonra ekrana yazar dememiz asında yanlış. Bilgisayar bunu aklıda kaydeder. Yani ekrana yazmaz. Bunları görmek için Firefox'un firebug uzantısını kullanabilirsiniz.</b></div> <div> <b><br /></b></div> <h3> if...Else if...Else Merdiveni</h3> <div> Soz Dizimi:</div> <div> <br /></div> <div> <div> <div> if (şart1) {</div> <div> //şart1 true değerini üretirse çalışacak kod grubu</div> <div> }else if (şart2){</div> </div> <div> //şart1 false değerini, şart2 true değerini üretirse çalışacak kod grubu</div> <div> }else if (şart3){</div> <div> //şart1 ve şart2 false değerini, şart3 true değerini üretirse çalışacak kod grubu</div> </div> <div> }else{</div> <div> //şart3 false değerini üretirse çalışacak kod grubu</div> <div> }</div> <div> <br /></div> <div> Bu yapıda if'den sonra istenilen kadar else if getirilebilir. Fakat else sonda olmak şartıyla bir kere getirilir. Else if veya else'nin çalışması için ondan önce gelen else if veya if'in false değerini üretmesi gerekir. Örneği inceleyelim:</div> <div> <br /></div> <div> <div> <div> <div> var sayi = prompt ("Pozitif bir sayı giriniz:");</div> <div> if (sayi<=0 && sayi<10) {</div> <div> console.log("a sayısı tek basamaklı");</div> <div> }else if (sayi<=10 && sayi<100) {</div> </div> <div> console.log("a sayısı çift basamaklı");</div> </div> <div> <div> }else if (sayi<=100 && sayi<1000) {</div> <div> console.log("a sayısı 3 basamaklı");</div> </div> <div> }else{</div> <div> console.log("a sayısının basamak sayısı 3'ten büyük");</div> <div> }</div> </div> <div> <br /></div> <div> Yukarıdaki prompt() bir değişkene sayı atanmsı için ziyaretçiye bir kutu sunmaktadır. Ve bu yapıda sayının kaç basamaklı olduğunu bize bildirmektedir.</div> <h3> Kümeli if</h3> <div> Söz Dizimi:</div> <div> <br /></div> <div> <div> if (şart1) {</div> <div> //şart1 true değerini verirse yani doğru ise çalışacak kod grubu</div> <div>      if (şart) {</div> <div>      //şart1 true değerini verip şart2 de true değeri üretirse çalışacak kod grubu</div> <div> }</div> <div> }</div> </div> <div> <br /></div> <div> Bu yapı sayesinde şart cevabını da şartlayabilirsiniz. Örneğin:</div> <div> <br /></div> <div> var a = 4;</div> <div> <div> if (a>2) {</div> <div> console.log("a 2'den büyük");Bu yöntem uzun if, else, else if yapılarından bizi kurtarır</div> <div>      if (a>3) {</div> <div>      console.log("a 3'den de büyük");</div> <div> }</div> <div> }</div> </div> <h3> Switch</h3> <div> Bu yöntem uzun if, else, else if yapılarından bizi kurtarır. Söz dizimi:</div> <div> <br /></div> <div> switch(deyim) {</div> <div> case deger1:</div> <div> //deyim=deger1 ise çalışacak kod grubu</div> <div> break;</div> <div> <div> case deger2:</div> <div> //deyim=deger2 ise çalışacak kod grubu</div> <div> break;</div> </div> <div> default:</div> <div> /Yukarıdaki şartlar doğru değil ise çalışacak kod grubu</div> <div> }</div> <div> <br /></div> <div> Burada sıra sıra deyime eşit (==) bir değer aranıp çalışacak kodlar belirtilmektedir. Ve çıkış için "break" kullanılmaktadır. Yeni bir case için break kesin kullanmalıyız. "default" ise yukarıdaki case kodları çalışmazsa, yanlış ise çalışacak kod grubudur.</div> <div> <br /></div> <div> Bu derslik bukadar ve bayağı yol aldık. Bir sonraki derste döngüleri göreceğiz. Zor bir ders olacak. Kolay gelsin.</div> <div> <br /></div>

Javascript Eğitimi Ders 6-if,Else,Else İf ve Merdivenler

Bir şart olşuturma ve boolean ile şart doğru ise değişkene true, yanlış ise değişkene false değerini vermedir. Şimdi incelemeye başlayalım. if Söz dizimine bakalım: if (şart) { //şart true değerini verirse yani doğru ise çalışacak kod grubu } Bu komut sadece şart doğru ise çalışır. DOğru değil ise …

Devamı »