Kayıtlar

HTML CSS border Örnek

<!DOCTYPE html> <html> <head> <style> p { border: 2px solid red; } </style> </head> <body> <h1>Bu bir başlık</h1> <p>Bu bir paragraf....</p> <p>Bu bir paragraf....</p> <p>Bu bir paragraf....</p> </body> </html>

HTML CSS padding Örnek

<!DOCTYPE html> <html> <head> <style> p { border: 2px solid red; padding: 15px; } </style> </head> <body> <h1>Bu bir başlık</h1> <p>Bu bir paragraf....</p> <p>Bu bir paragraf....</p> <p>Bu bir paragraf....</p> </body> </html>

HTML CSS margin Örnek

<!DOCTYPE html> <html> <head> <style> p { border: 2px solid red; padding: 15px; margin: 40px; } </style> </head> <body> <h1>Bu bir başlık</h1> <p>Bu bir paragraf....</p> <p>Bu bir paragraf....</p> <p>Bu bir paragraf....</p> </body> </html>

HTML id Özelliği ile CSS Örnek

<!DOCTYPE html> <html> <head> <style> p#farkli { color: red; } </style> </head> <body> <p>Bu bir paragraf....</p> <p>Bu bir paragraf....</p> <p>Bu bir paragraf....</p> <p id="farkli">Bu diğerlerinden farklı bir paragraf....</p> </body> </html>

HTML class Özelliği ile CSS Örnek

<!DOCTYPE html> <html> <head> <style> p.uyari { color: blue; } </style> </head> <body> <p>Bu bir paragraf....</p> <p>Bu bir paragraf....</p> <p>Bu bir paragraf....</p> <p class="uyari">Bu diğerlerinden farklı bir paragraf....</p> <p>Bu bir paragraf....</p> <p class="uyari">Bu da diğerlerinden farklı bir paragraf....</p> </body> </html>

Bir web sitesine link verme örnek

<!DOCTYPE html> <html> <head> <style> p.uyari { color: blue; } </style> </head> <body> <p><a href="http://htmlvecssegitimi.blogspot.com/2015/11/html-giris.html">HTML Dersleri sayfamızı ziyaret edin</a></p> </body> </html>

HTML Yerel Link Örnek

<!DOCTYPE html> <html> <head> <style> p.uyari { color: blue; } </style> </head> <body> <p><a href="2015/09/html-a-etiketi.html">HTML a Etiketi</a> bu websitesi içinde bir sayfanın linki</p> <p><a href="https://www.youtube.com/">YouTube</a> internette bir websitesinin linki</p> </body> </html>

Linklerin Renklerini Değiştirme Örnek

<!DOCTYPE html> <html> <head> <style> a:link { color: green; background-color: transparent; text-decoration: none } a:visited { color: brown; background-color: transparent; text-decoration: none } a:hover { color: red; background-color: transparent; text-decoration: underline } a:active { color: orange; background-color: transparent; text-decoration: underline } </style> </head> <body> <p>Linklerin varsayılan renklerini değiştirebilirsiniz.</p> <a href="http://htmlvecssegitimi.blogspot.com/2016/01/html-link-rengi-degistirme-ornek.html" target="_blank">HTML Link Rengi Değiştirme Örneği</a> </body> </html>

target _blank link örneği

<!DOCTYPE html> <html> <body> <a href="http://htmlvecssegitimi.blogspot.com/2015/11/html-giris.html" target="_blank">HTML Derslerimizi ziyaret edin</a> <p>target özelliğini "_blank" yaptığınızda, link yeni bir tarayıcı penceresi veya sekmesinde açılır.</p> </body> </html>

HTML'de Resimlere Link Verme Örnek

<!DOCTYPE html> <html> <body> <p>Resim artık bir link. Üzerine tıklayabilirsiniz.</p> <a href="http://htmlvecssegitimi.blogspot.com/2015/11/html-dersleri.html"> <img src="http://2.bp.blogspot.com/-HWWb1bhgTrM/Vo2UX0zJk6I/AAAAAAAAAvA/1fG5qFqeJAM/s200/smiley.gif" alt="HTML Dersleri" style="width:100px;height:100px;border:0" /> </a> <p>Internet Explorer 9 ve önceki sürümlerinin resmin çevresinde kenar çizgisi göstermesini engellemek için "border:0" özelliğini ekledik.</p> </body> </html>

HTML Linkler

Resim
« Önceki Ders Sonraki Ders » HTML Linkler (Web Bağlantıları) Linkler, yani bağlantılar, tüm web sayfalarında vardır. Linkler aynı web sitesinin farklı sayfalarına yönlendirilebileceği gibi farklı web sitelerinin sayfalarına da yönlendirilebilir. HTML linki, bir web bağlantısıdır (hyperlink). Web bağlantıları bir metin olabileceği gibi, bir resim de olabilir. Metin görünümündeki web bağlantısı tıklanabilir bir metni ifade ederken, resim üzerine eklenen web bağlantısı ise tıklanabilir bir resmi ifade eder. HTML belgelerinde linkler yani bağlantılar <a> etiketi ile tanımlanır: <a href="sayfa linki">bağlantı metni</a> Örnek <a href="html-giris.html">HTML Dersleri sayfamızı ziyaret edin</a> Kendiniz deneyin » href özelliği ile bağlantı yapılacak ad

HTML alt Özelliği Örnek

<!DOCTYPE html> <html> <body> <p>Tarayıcı resmi bulamadığında alt özelliğine girilen alternatif metni gösterir:</p> <img src="https://lh3.googleusercontent.com/-NE-3K559zkQ/ViVybTh5YqI/AAAAAAAAAG8/fvJSe7lEA9Y/w139-h140-p/resimler_ornek.jpg" alt="HTML Resimler" style="width:150px; height:150px;" /> </body> </html>

HTML Resimler Giriş Örnek

<!DOCTYPE html> <html> <body> <img src="https://lh3.googleusercontent.com/-NE-3K559zkQ/ViVybTh5YqI/AAAAAAAAAr8/fvJSe7lEA9Y/cennet_papagani.jpg" alt="Papagan" style="width:200px; height:200px;" /> </body> </html>

HTML Resimler Genişlik ve Yükseklik Örnek

<!DOCTYPE html> <html> <body> <img src="https://lh3.googleusercontent.com/-NE-3K559zkQ/ViVybTh5YqI/AAAAAAAAAr8/fvJSe7lEA9Y/cennet_papagani.jpg" alt="Papagan" style="width:200px; height:200px;" /> </body> </html>

html resimlerde style width and height kullanilmamali

Resim
htmlvecssegitimi.blogspot.com Kodu Çalıştır butonuna tıklayarak HTML belgesini Sonuç Ekranı 'nda görüntüleyebilirsiniz. KODU ÇALIŞTIR SAYFAYI TEMİZLE SAYFAYI YENİLE KAYNAK KODLARI SONUÇ EKRANI <!DOCTYPE html> <html> <body> <img src="https://lh3.googleusercontent.com/-NE-3K559zkQ/ViVybTh5YqI/AAAAAAAAAr8/fvJSe7lEA9Y/cennet_papagani.jpg" alt="Papagan" width="200" height="200px" /> </body> </html> HTML ve CSS Dersleri © 2015 HTMLveCSSegitimi.blogspot.com

HTML Resimler - width ve height mi yoksa style özelliği mi?

<!DOCTYPE html> <html> <head> <style> img { width:100%; } </style> </head> <body> <p><b>width</b> ve <b>height</b> özellikleri yerine <b>style</b> özelliğini kullanmak daha iyidir. Çünkü style özelliği, belgeiçi veya harici stil şablonlarının (CSS) resmin orijinal boyutunu değiştirmesini önler:</p> <br /> <p><b>style özelliği kullanılan resim:</b></p> <img src="http://3.bp.blogspot.com/-xijt8FqSp90/VkQXdGRzvAI/AAAAAAAAAtU/otfohMyfZeE/s200/HTML.png" alt="HTML5 ikon" style="width:150px; height:150px;" /> <p><b>width ve height özellikleri kullanılan resim:</b></p> <img src="http://3.bp.blogspot.com/-xijt8FqSp90/VkQXdGRzvAI/AAAAAAAAAtU/otfohMyfZeE/s200/HTML.png" alt="HTML5 ikon" width="150px" height="150px" /> </body> <

HTML Hareketli Resimler Örnek

<!DOCTYPE html> <html> <body> <p>GIF standartları hareketli resimlere izin verir</p> <img src="http://4.bp.blogspot.com/-HWWb1bhgTrM/Vo2UX0zJk6I/AAAAAAAAAvE/vporP8Uqhc4/s200/smiley.gif" alt="Gülen gif" style="width:100px;height:100px;"> </body> </html>

HTML'de Resimleri Link Olarak Kullanma Örnek

<!DOCTYPE html> <html> <body> <p>Aşağıdaki resim HTML Resimler konusuna yönlendiren bir <b>linktir</b>. Tıklayabilirsiniz.</p> <a href="http://htmlvecssegitimi.blogspot.com/2016/01/html-resimler.html"> <img src="http://1.bp.blogspot.com/-GxgBQDz7RFA/Vkn6nmQCsFI/AAAAAAAAAu0/UUAvlaHDMNE/s200/HTML-CSS.png" alt="HTML Resimler" style="width:280px;height:210px;border:0;" /> </a> <p>Internet Explorer 9 ve önceki sürümlerinin resmin etrafında kenarlık çizgisi oluşturmasını önlemek için "border:0;" özelliğini kullanabilirsiniz.</p> </body> </html>

Yazıya Göre Resim Konumlandırma Örnek

<!DOCTYPE html> <html> <body> <p><strong>Resmi sola yaslama:</strong></p> <p> <img src="http://4.bp.blogspot.com/-HWWb1bhgTrM/Vo2UX0zJk6I/AAAAAAAAAvE/vporP8Uqhc4/s200/smiley.gif" alt="Smiley" style="float:left; width:60px; height:60px;" /> Float özelliği ile sola yaslanmış resimli bir paragraf. Float özelliği ile sola yaslanmış resimli bir paragraf. </p> <p><strong>Resmi sağa yaslama:</strong></p> <p> <img src="http://4.bp.blogspot.com/-HWWb1bhgTrM/Vo2UX0zJk6I/AAAAAAAAAvE/vporP8Uqhc4/s200/smiley.gif" alt="Smiley" style="float:right; width:60px; height:60px;" /> Float özelliği ile sağa yaslanmış resimli bir paragraf. Float özelliği ile sağa yaslanmış resimli bir paragraf.</p> <p>Nesneleri konumlandırmak için CSS float özelliğini kullanabilirsiniz. HTML 4'te align özelliği artık kullanılmıyor ve HTML5'te de

HTML Resimler

Resim
HTML Resimler <img> Etiketi HTML'de resimler <img> etiketi ile gösterilir. <img> etiketi boş etiket olarak tanımlanır, yani kapanış etiketi yoktur ve sadece özellikler (parametreler) içerir. src özelliği resmin URL'sini (web adresini) belirtir. alt özelliği ise, resmin görüntülenmediği durumlar için alternatif metni tanımlar: <img src="URL" alt="alternatif metin"> Örnek <!DOCTYPE html> <html> <body> <h2>HTML Resimler - Örnek</h2> <img src="cennet_papagani.jpg" alt="Papagan" width="150px" height="150px"> </body> </html> Kendiniz deneyin » Resimlerin yükseklik ve genişlik değerlerini her zaman belirtin. Yükseklik ve genişlik değerleri belirtilmediğin

HTML map etiketi resim haritası örnek

<!DOCTYPE html> <html> <body> <p>Daha yakından görmek için güneşe ya da gezegenlerden birine tıklayabilirsiniz</p> <img src="https://lh3.googleusercontent.com/-Ay-1jGFC7bc/VgLOkrgc30I/AAAAAAAAArI/KOOkdC7DpJM/s128-Ic42/gezegenler.gif" width="145" height="126" alt="Gezenler" usemap="#gezegenharitasi" /> <map name="gezegenharitasi"> <area shape="rect" coords="0,0,82,126" alt="Sun" href="https://lh3.googleusercontent.com/-GPOZsXy5A5M/Vi5rXecpOYI/AAAAAAAAAsY/Eg9lzzlIfmo/h120/gunes.gif"> <area shape="circle" coords="90,58,3" alt="Mercury" href="https://lh3.googleusercontent.com/-az1zJs6vAB4/VgLOknVK2sI/AAAAAAAAArE/9hlbpgGk7pg/s128-Ic42/merkur.gif"> <area shape="circle" coords="124,58,8" alt="Venus" href="https://lh3.googleusercontent.com/

HTML Tablo Örneği

<!DOCTYPE html> <html> <body> <table style="width:100%"> <tr> <td>Lionel Messi</td> <td>24 Haziran 1987</td> <td>Barcelona</td> </tr> <tr> <td>Cristiano Ronaldo</td> <td>5 Şubat 1985</td> <td>Real Madrid</td> </tr> <tr> <td>Zlatan Ibrahimović</td> <td>3 Ekim 1981</td> <td>Paris Saint Germain</td> </tr> <tr> <td>Arjen Robben</td> <td>23 Ocak 1984</td> <td>Bayern Münih</td> </tr> </table> </body> </html>

CSS3 text-overflow Örnek

<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>css text-overflow özelliği ve örnek uygulama</title> <style> .kutu1 { white-space: nowrap; width: 180px; overflow: hidden; text-overflow: clip; border: 1px solid blue; } .kutu2 { white-space: nowrap; width: 180px; overflow: hidden; text-overflow: ellipsis; border: 1px solid blue; } </style> </head> <body> <p>İçerikler html elemanının boyutunu taştığı zaman (...) şeklinde gösterebiliriz. Örnekleri inceleyiniz..</p> <h3>text-overflow:clip uygulandığında</h3> <div class="kutu1">html ve css dersleri örnek uygulamalar dersler..</div> <h3>text-overflow:clip uygulandığında</h3> <div cla

JavaScript CSS3 animation-delay Örnek

Resim
javascript css3 animation-delay örnek uygulama Aşağıdaki animasyon kutucuğu 5 saniye sonra harekete geçecektir. Javascript ile animation-delay özelliğine animation-delay: 2s; değeri verildiğindeki etkisini görmek için aşağıdaki çalıştır tuşuna basınız ! Çalıştır

CSS transition-delay Özelliği

CSS transition-delay Css transition-delay özelliği ile css animasyonlarının gecikme süresi belirlenebilir. Örnek: Bu örnekte genişliği 90px olan bir div elemanının genişliği6 saniyede 360px olacaktır. Fakat transition-delay: 3s; değeri verildiği için 3 saniye gecikmeli başlayacaktır. div { width: 90px; height: 90px; background: yellow; border: 1px solid black; -webkit-transition-property: width; -webkit-transition-duration: 6s; -webkit-transition-delay: 3s; transition-property: width; transition-duration: 6s; transition-delay: 3s; overflow; auto; } div:hover { width: 360px; } Kendiniz deneyin » CSS transition-delay nedir nasıl kullanılır Css ile oluşturulan animasyonların gecikme süresi bu özellik ile tanımlanabilir. CSS transition-delay CSS transition-delay özellikleri &nbsp Varsayılan Değer: 0s  

CSS transition Özelliği

CSS transition Css transition özelliği ile bir animasyonun veya bir css etkisinin gerçekleşme süresi ,gecikme süresi ne kadar süreceği düzenlenebilir. Örnek: Bu örnekte bir div elemanının genişliği 90px'ten 360px olması 3 saniyede gerçekleşmiştir. div { width: 90px; height: 90px; color: white; background: crimson; transition: width 3s; -webkit-transition: width 3s; /* Safari 3.1 to 6.0 */ } div:hover { width: 360px; } Kendiniz deneyin » CSS transition nedir nasıl kullanılır Css transition özelliği ile html elemanlarına uygulanacak olan css etkilerinin geçiş süresi tanımlanabilir. CSS transition CSS transition özellikleri &nbsp Varsayılan Değer: all 0s ease 0s   Kalıtsallık: yok   Animasyon Özelliği: yok   Versiyon: CSS3   JavaScript transition:

CSS transform-origin Özelliği

CSS transform-origin Css transform-origin özeliği ile dönüştürülecek html elemanın orijin noktaları düzenlenebilir. Örnek: Bu örnete kutu 60 derece döndürülmüştür. #kutu1 { position: relative; height: 180px; width: 180px; } #kutu2 { position: absolute; -ms-transform: rotate(60deg); /* IE 9 */ -ms-transform-origin: 30% 50%; /* IE 9 */ -webkit-transform: rotate(60deg); /* Chrome, Safari, Opera */ -webkit-transform-origin: 30% 50%; /* Chrome, Safari, Opera */ transform: rotate(45deg); transform-origin: 30% 50%; } Kendiniz deneyin » CSS transform-origin nedir nasıl kullanılır 2D dönüşümler bir elemanın x- ve y-ekseni değiştirebilir. 3D dönüşümler de bir elemanın z - eksenini değiştirebilirsiniz. CSS transform-origin CSS transform-origin özellikleri &nbsp Varsayılan Değer: 50% 50% 0   Kalıts

CSS transform Özelliği

CSS transform Css transform Dönüşümü özelliği bir elemanın bir 2D veya 3D biçimlendirme işlemlerini düzenler. Örnek: Bu örnekte div elemanı 15 derece döndürülmüştür. div { width: 150px; height: 100px; background-color: pink; transform: rotate(15deg); -ms-transform: rotate(15deg); -webkit-transform: rotate(15deg); margin: 50px; } Kendiniz deneyin » CSS transform nedir nasıl kullanılır Css transform özelliği ile html elemanlarını döndürülebilir 2 ve 3 boyutlu nesnelere haline çevirilebilir. CSS transform CSS transform özellikleri   Varsayılan Değer: none   Kalıtsallık: yok   Animasyon Özelliği: var Oynat Versiyon: CSS3   JavaScript transform: object.style.transform="rotate(45deg)" Oynat CSS transform Tarayıcı De

CSS top Özelliği

CSS top Css top özelliği ile durağan halde bulunmayan html elementlerinin konumları düzenlenebilir. Örnek: Bu örnekte kapsayıcısı içinde bulunan küçük kutu büyük kutuya göre 150px uzaklıktadır. div.relative { position: relative; width: 250px; height: 280px; border: 2px solid yellow; } div.absolute { position: absolute; top: 150px; width: 100px; height: 100px; border: 2px solid blue; } Kendiniz deneyin » CSS top nedir nasıl kullanılır Css top özelliğini kullanırken dikkat edilmesi gereken elementin position değeridir.Bu değer varsayılan olarak relative dir.Yani eleman durağan haldedir.Top değeri girilse bile eleman konum değiştirmez. CSS top CSS top özellikleri &nbsp Varsayılan Değer: auto   Kalıtsallık: yok   Animasyon Özelliği: var Oynat Versiy

CSS text-shadow Özelliği

Resim
Yazıya gölge efekti CSS text-shadow Css text-shadow özelliği metine gölge ekler . h1 { text-shadow: 2px 2px crimson; } h2 { text-shadow: 1px 1px pink; } h3 { text-shadow: 1px 1px blue; } Kendiniz deneyin » CSS text-shadow nedir nasıl kullanılır Bu özelliği uygularken sırasına göre yataydaki öteleme miktarı düşeydeki miktarı ve renk değeri girilerek özelliğin etkisini gösterebilirsiniz. CSS text-shadow CSS text-shadow özellikleri Varsayılan Değer: none Kalıtsallık: var Animasyon Özelliği: var Oynat Versiyon: CSS3

CSS text-overflow Özelliği

Resim
CSS text-justify Css text-justify özelliği ile taşan metinlerin nasıl sonlandırılacağı düzenlenir. Örnek: Bu örnekte iki farklı div elemanına farklı değerlerde text-overflow özelliği uygulanmıştır. .kutu1 { white-space: nowrap; width: 180px; overflow: hidden; text-overflow: clip; border: 1px solid blue; } .kutu2 { white-space: nowrap; width: 180px; overflow: hidden; text-overflow: ellipsis; border: 1px solid blue; } Kendiniz deneyin » CSS text-justify nedir nasıl kullanılır Metinlerin içinde bulundukları elemanın sınır boyutlarına ulaştığındaki gösterim şekli bu özellikle birlikte düzenlenebilir. CSS text-justify CSS text-justify özellikleri   Varsayılan Değer: clip   Kalıtsallık: yok   Animasyon Özelliği: yok   Versiyon: CSS3