Kayıtlar

html-dersleri etiketine sahip yayınlar gösteriliyor

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>

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/