Kayıtlar

html5 dersleri etiketine sahip yayınlar gösteriliyor

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...

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() {         ...

HTML5 Dersleri - Neler Getti, Neler Geldi

HTML 4.01 yayınlandığından bu yana internetin kullanım şekli ve amacı çok değişti. 1999'da standart haline gelen HTML4 artık yerini daha fazla teknolojik uyumluluk içeren HTML5'e bıraktı. Eski HTML standardından kullanılmayan bir çok etiket ve element HTML5'de çıkartıldı ve yerine, günümüz internet kullanım koşullarına uygun yenilikler getirildi. HTML5'in hızla büyümesinin en büyük nedeni, bu büyüme hızıyla doğru orantılı şekilde büyümeye devam eden mobil internet kullanımıdır. Şu anda kullandığımız cep telefonları ve tablet bilgisayarların donanımsal özellikleri, 1999 yılıyla, yani HTML 4.01'in standart olduğu yıl ile neredeyse aynı, hatta daha bile kuvvetlidir. Bu yüzden HTML5'e ihtiyaç duyulmuştur. Fakat HTML5'e duyulan ihtiyaca neden olan tek gerekçe bu değildir. İnternet hızlarının yükselmesi ve günlük kullanıcının fiber optik dahil olmak üzere aşırı geniş bantlı internet hizmetlerini kullanabiliyor olması, Streaming'in önünü çok daha fazla açtı...