Kayıtlar

html dersleri etiketine sahip yayınlar gösteriliyor

Web Sitesine Skype Linki Eklme (Web Sitesi Ücretsiz Canlı Destek)

Resim
Web sitesi üzerinden ücretsiz canlı destek vermek için kullanabileceğiniz yöntemlerden birisi de neredeyse her bilgisayarda kullanılan Skype yazılımıdır. Şirketin Microsoft tarafından satın alınması bu yazılımın daha da büyüyeceğinin hatta bir standart olabileceğinin göstergesi olarak kabul edilmektedir. Belirli kullanıcıları operatör olarak kullanmak ve bunları bir canlı destek hattı gibi göstermek ise oldukça basit bir kaç adımdan oluşuyor. Öncelikle web sitenize koyacağınız kısmın üzerinden geçelim.      < a href ="skype:webtasarim101?call">         < img alt ="My status" height ="16" src ="http://mystatus.skype.com/smallicon/webtasarim101" style =" border : currentColor ; " width ="16" />         webtasarim101     </ a > Bu kodu iletişim sayfanıza ya da istediğiniz her hangi bir yere yapıştırdıktan sonra " webtasarim101 " yazan kısıml...

CSS - Word Warp

Resim
Zaman zaman yazdığınız yazılardaki bir kelime mevcut div alanınızdan daha geniş olabilir. Zira bu tür durumlarda bu kelime div'in dışına taşmaktadır. Her ne kadar metin bütünlüğü açısından zaman azman sorunlar yaratsa da tasarımın kaymaması adına bu kelimeyi bölüp bir alt satıra geçirmek tasarımcı açısından daha mantıklı olacaktır. Örnek senaryoda kullanıcının isim ve soyismini tutan ve genellikle kelimeleri alt alta getiren bir div var fakat soyismi çok uzun olan bir kullanıcı tasarımda bozulmaya neden oluyor. Word Wrap'ın nasıl bir etki yarattığını görelim. HTML (Normal) <p class="isimAlani">Ali Kocamustafapaşaoğulları</p> CSS (Normal) .isimAlani { width:80px;  border:1px solid #000000; } Sonuç: HTML (Word Warp ile) <p class="isimAlani">Ali Kocamustafapaşaoğulları</p> CSS (Word Warp ile) .isimAlani { width:80px;  border:1px solid #000000; word-wrap:break-word; } Sonuç: CSS Word Warp öz...

HTML'de JavaScript ile DIV Gösteme/Gizleme

Eğer bir <div>'in içerisindeki içeriği belirli bir aksiyona göre değiştirmek istiyorsanız bunun en kolay yollarından birisi, ilgili alanı tamamen gizlemek veya göstermektir. JavaScript ile bu kolayca gerçekleştirilebilir. HTML <nav class="subnav" id="paket">  <ul>   <li><a href="a.html">Referans A</a></li>   <li><a href="a.html">Referans B</a></li>   <li><a href="a.html">Referans C</a></li>  </ul> </nav> <nav class="subnav" id="sektorel" style="display:none;">  <ul>   <li><a href="1.html">Referans 1</a></li>   <li><a href="1.html">Referans 2</a></li>   <li><a href="3.html">Referans 3</a></li>  </ul> </nav> <input type="button" id="bir" v...

jQuery / JavaScript Çakışması

Bazı durumlarda değişkenler aynı olduğu için kullandığınız JavaScriptler çalışmayabilir veya düzgün fonksiyon göstermeyebilir. Bu durumda başvurulacak olan yöntem tanımlanan JavaScript değişkenine yeni bir isim atamaktır. Örneğin "$" tanımlayıcısına "x" değişkeni atanarak bu durum engellenebilir:     <script type="text/javascript">         var $x = jQuery.noConflict();         $x(document).ready(function() {             $x('#ekle').click(function(){                 $x('#ozellikler').append("Özellik");});         });     </script> Kaynak:  http://www.csharpkitabi.com/

HTML - Focus Kullanımı

Resim
İsminden de anlaşılabileceği gibi Focus metodu bir öğenin üzerine odaklanmanızı sağlamaktadır. Yani o anda seçili olan alanı, sizin odaklanılmasını istediğiniz alana getirir. Örneğin: <! DOCTYPE html > < html > < head >     < title > Web Tasarım 101 </ title >     < style type ="text/css">         a:focus , a:active {             color : red ;         }     </ style >     < script >         function getfocus() {             document.getElementById( 'linkeGit' ).focus();         }         function losefocus() {         ...