Kayıtlar

Nisan, 2017 tarihine ait yayınlar gösteriliyor

En çok okunan

Ücretsiz Bitcoin Kazan Pasif Gelir Elde Et İnternetten Para Kazan

Resim
  İnternetten para kazanmanın yolları ile ilgili yazılar paylaşmaya devam edeceğim. Sizler de internetten gelir elde etmek istiyorsanız yazılarımı takip ederek internetten para kazandıran siteler ve uygular ile hızlı ve kolay para kazan abilirsiniz. Harika Bir pasif gelir elde et Uyurken Bile Para Kazan Ücretsiz bitcoin kazan dıran bu harika sitenin ayrıca referans sistemi var. Üye olduğunuzda Refer(sayfasına gidip kendi linkinizi heryerde paylaşın ve para kazanmaya hemen başlayın.) Arkadaşlarınızı da üye yaparak  pasif gelir elde edebilirsiniz . Genelde uyurken bile para kazan   denildiğinde anlamanız gereken bu sistemdir. Haydi Ücretsiz Bitcin kazanmaya başlayalım ve paraya dönüştürelim. Siteye Hemen Üye ol: FreeBitcoin  ( tıkla ) Ücretsiz Bitcoin Kazandıran siteye hemen üye ol (arkadaşlarınla paylaş) uyurken bile para kazan Her saat bitcoin kazanabilirsin ( Şanslı isen 200 Dolar değerinde Bitcoin ) Kazandığın her bitcoinle ücretsiz  çekiliş bileti alabilirsiniz. Dikkatle oku

HTML yorum etiketi ile öğe gizleme örneği

Merhaba arkdaşlar , html işaretleme dilinde  yorum etiketini bir webmaster olarak  kulanmamız gerekebilir.Bu bize kodların karışmamasını ve disiplinli bir çalışma yapmamıza olanak sağlar.Bu örneği uygulayarak  nasıl html yorum tagını yani etiketini kullanabileceğinizi öğreneceksiniz. <!DOCTYPE html> <html> <body> <p>Kodu Çalıştır butonuna tıkladığınızda, yorum etiketleri arasındaki öğe tarayıcıda görüntülenmez. Yorum etiketlerini silerek içeriği görüntüleyebilirsiniz.</p> <!-- Aşağıdaki içeriği şimdilik gizle <img border="0" src="http://3.bp.blogspot.com/-NE-3K559zkQ/ViVybTh5YqI/AAAAAAAAAr8/fvJSe7lEA9Y/s320/cennet_papagani.jpg" alt="papagan" /> --> </body> </html> Bu bloğu yazarken html kaynak kodlarında sürekli güncellemeler ve düzenlemeler yapıyorum.Blogger kaynak görünümüne geçtiğiniz de bir çok yorum satırlarımı bulabilirsiniz. bu örneği tamamladığınızda html b

javascript ile hoşgeldin dünya örneği

Resim
Sayfa yüklenir yüklenmez dikkat ederseniz alert fonsiyonu ile uyari penceresi göstermesini sağlıyoruz. Javascript merhaba dünya uygulaması <!DOCTYPE HTML> <html lang="tr"> <head> <meta charset="UTF-8"> <title>İlk kod çalıştırma örneğimiz</title> </head> <body> <p>Bu örnekte daha sonradan göreceğimiz Javascript metodlarından(fonksiyonlarından) biri yani alert metodu kullanılmıştır.Ekrana uyarı penceresi çıkartan bir fonksiyondur.</p> <script> alert("Hoşgeldin Dünya"); </script> </body> </html>

Javascript Derslerine Giriş

Resim
Javascript ,kullanıcı taraflı(client) yani bilgisayarımızdaki tarayıcılarda çalışarak html kodlarını biçimlendiren,değiştirebilen ve dinamik web sayfaları üretmemizi sağlayan bir script dilidir. Javascript öğreniyorum Javascriptin özellikleri Kullanıcı taraflı çalışan bir scripttir. Javascript dosyalarının uzantıları .js uzantılıdır. Sitelerin kullanıcıları tanımak için kullandıkları çerezler hariç bilgisayarda dosya oluşturamaz değiştiremez veya yazamaz. Tarayıcılarda(browser) çalışırlar. <script> </script> etiketleri arasına yazılırlar. Farklı tarayıcılarda aynı şekilde çalışmayabilirler. Javascript kodlarını iki şekilde sayfada kullanabiliriz Javascript kodları html sayfası içerisinde yazılabileceği gibi, harici bir dosyadan da çağırabiliriz.Aşağıdaki bir html sayfası kaynak kodlarına dikkat edin,javascript kodları script etiketleri arasına yazılmıştır. <

HTML yorum Etiketi Örnek

<!DOCTYPE html> <html> <body> <!-- Hakkımda sayfası içeriği --> <p>Bir paragraf.....</p> <!-- Buraya daha fazla bilgi girmeyi unutma! --> </body> </html>

HTML var Etiketi Örnek

<!DOCTYPE html> <html> <body> <p>Einstein'ın ünlü denklemi: <var>E</var> = <var>m</var><var>c</var><sup>2</sup></p> </body> </html>

HTML satırsonları ve boşlukları koruma Örnek

<!DOCTYPE html> <html> <body> <p>code öğesi satırsonlarını ve boşlukları korumaz.</p> <p>Bunu düzeltmek için code öğesini pre öğesi içerisine girebilirsiniz.</p> <pre> <code> var x = 4; var y = 7; document.getElementById("ornek").innerHTML = x + y; </code> </pre> </body> </html>

HTML code Etiketi Örnek

<!DOCTYPE html> <html> <body> <p>Programlama kodu örneği</p> <code> var x = 4; var y = 7; document.getElementById("ornek").innerHTML = x + y; </code> </body> </html>

HTML samp Etiketi Örnek

<!DOCTYPE html> <html> <body> <p>HTML samp öğesi bir bilgisayar programının örnek çıktısını tanımlar.</p> <samp> demo.ornek.com login: Mar 28 05:30:25 Linux 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189 </samp> </body> </html>

HTML kbd Etiketi Örnek

<!DOCTYPE html> <html> <body> <p>kbd öğesi klavye girişini tanımlar:</p> <p><kbd>Dosya | Aç...</kbd></p> </body> </html>

HTML bdo Etiketi Örnek

<!DOCTYPE html> <html> <body> <p>Tarayıcınız bi-directional override (bdo), yani çift yönlü yazımı destekliyorsa, aşağıdaki satır right-to-left (rtl) sağdan sola doğru yazılmış olarak görüntülenecektir:</p> <bdo dir="rtl">Bu satır sağdan sola doğru yazılacak</bdo> </body> </html>

HTML blockquote Etiketi Örnek

<!DOCTYPE html> <html> <body> <p>Tarayıcılar blockquote öğelerini girintileyerek gösterir</p> <blockquote> Birleşmiş Milletler Çocuk Fonu UNICEF, dünyada çocuk haklarının başlıca savunucusudur. Hükümetlerle çalışarak kalıcı sonuçlar elde eden bir örgüttür. Bütün çocukların bedensel, zihinsel ve sosyal bakımdan mümkün olan en üst seviyeye erişecek şekilde gelişebilmeleri için gereken haklarını belirleyen Birleşmiş Milletler Çocuk Hakları Sözleşmesi, UNICEF'in çalışmalarının temelini oluşturur. </blockquote> </body> </html>

HTML cite Etiketi Örnek

<!DOCTYPE html> <html> <body> <p>HTML blockquote öğesi bir eserin, çalışmanın adını tanımlar.</p> <p>Tarayıcılar blockquote öğelerini genellikle italik yazı stilinde gösterir.</p> <img src="http://3.bp.blogspot.com/-BrCUY458dfc/VhzWOy_ZGRI/AAAAAAAAArc/48gD1xjewMw/s320/aynanin-onundeki-kiz.jpg" /> <p><cite>Aynanın Önündeki Kız</cite> Pablo Picasso'nun 1932'de tamamladığı eseri.</p> </body> </html>

HTML q Etiketi Örnek

<!DOCTYPE html> <html> <body> <p>Tarayıcılar <q> etiketi içerisine girilen metni tırnak işareti içerisine alır.</p> <p>Harlan Coben'in Kapan adlı eserinden: <q>Gün geçmiş ve daha çok şey öğrenmiş olsak da, aynı hataları tekrarlamak insanların dna'larında var.</q></p> </body> </html>

CSS transform animasyon

<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <style> #kutu-1 { margin: 50px; border: 5px ridge pink; width: 250px; height: 150px; background-color: yellow; color: black; -webkit-animation: animasyonismi 4s infinite; animation: animasyonismi 4s infinite; text-align:center; } @-webkit-keyframes animasyonismi { 50% {-webkit-transform: rotate(180deg);} } @keyframes animasyonismi { 50% {transform: rotate(180deg);} } </style> </head> <body> <strong>css transform animasyon örnek</strong> <br /> <p>Gradually rotate the DIV element 180 degrees, and back: <p> <div id="kutu-1"> <h2>HTML Dersleri <br />CSS Dersleri <br />Javascript Dersleri</h2> </div> <em style="color:red;"&g

CSS vertical-align animasyon

<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <style> #smiley { vertical-align: 5px; -webkit-animation: animasyonismi 4s infinite; animation: animasyonismi 4s infinite; } @-webkit-keyframes animasyonismi { 50% {vertical-align: 60px;} } @keyframes animasyonismi { 50% {vertical-align: 60px;} } </style> </head> <body> <strong>css vertical-align animasyon örnek</strong> <br /> <p><img id="smiley" src="http://1.bp.blogspot.com/-k6EFP00YgfE/VjfkqS_J-_I/AAAAAAAAA3s/mgB0RJlnmvM/s1600/pengu.jpg" width="50" height="50"> <u>css vertical align</u> özelliği ile düşeyde hizalama yapılabilir.<u>css vertical align</u> özelliği ile düşeyde hizalama yapılabilir.<u>css vertical align</u> özelliği ile düşeyde hizalama yapılabilir.<u>

CSS width animasyon

<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <style> #kutu-1 { width: 100px; background-color: crimson; color: white; -webkit-animation: animasyonismi 4s infinite; animation: animasyonismi 4s infinite; border:3px ridge yellow; } @-webkit-keyframes animasyonismi { 50% {width: 300px;} } @keyframes animasyonismi { 50% {width: 300px;} } </style> </head> <body> <strong>css width animasyon örnek</strong> <br /> . <div id="kutu-1"> <h1>Genişleyecek kutu</h1> </div> <em style="color:red;">css width </em>özelliğini bir html elemanını genişliğini belirtmek için kullanılır. <br /> <u style="color:blue;"> css width</u> özelliğinin animasyon özelliği vardır. <p style="color:green;"><b&g

CSS word-spacing animasyon

<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <style> #kutu-1 { border: 3px ridge crimson; -webkit-animation: animasyonismi 6s infinite; animation: animasyonismi 6s infinite; background:yellow; padding:35px; } @-webkit-keyframes animasyonismi { 50% {word-spacing:30px;} } @keyframes animasyonismi { 50% {word-spacing: 30px;} } </style> </head> <body> <strong>css word-spacing animasyon örnek</strong> <br /> <div id="kutu-1"> css word-spacing özelliği ve <code>word-spacing:30px;</code> değerini uyguladığımızda kelimeler arası uzaklık "30px" olacaktır.css word-spacing özelliği ve word-spacing:30px; değerini uyguladığımızda kelimeler arası uzaklık "30px" olacaktır. </div> <em style="color:red;">css word-spacing </em>özelli

CSS z-index animasyon

<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <style> div {position: absolute;} #crcve div { background-color: yellow; border: 1px solid gray; width: 200px; height: 200px; opacity: 0.4; color:black; margin:100px; } div#kirmizikutu { opacity: 1; background-color: crimson; z-index: 1; -webkit-animation: animasyonismi 6s infinite linear; animation: animasyonismi 6s infinite linear; color:white; } @-webkit-keyframes animasyonismi { 50% {z-index: 5;} } @keyframes animasyonismi { 50% {z-index: 5;} } </style> </head> <body style="position:absolute;"> <strong>css z-index animasyon örnek</strong> <br /> <div id="crcve"> <div id="kirmizikutu">kirmizikutu</div> <div style=

HTML Satıriçi Stil Atama Örnek

<!DOCTYPE html> <html> <body> <p style="color:red;">Bu kırmızı renkle yazılmış bir paragraftır.</p> </body> </html>

Belgeiçi Stil Atama Örnek

<!DOCTYPE html> <html> <head> <style> body {background-color:red;} h1 {color:green;} p {color:blue;} </style> </head> <body> <h1>Başlık</h1> <p>Paragraf......</p> </body> </html>

HTML CSS Fontlar Örnek

<!DOCTYPE html> <html> <head> <style> h1 { color: green; font-family: arial; font-size: 320%; } p { color: blue; font-family: tahoma; font-size: 150%; } </style> </head> <body> <h1>CSS Font Özellikleri</h1> <p>CSS <b>color</b> özelliği HTML öğesi için kullanılacak yazı rengini tanımlar.</p> <p>CSS <b>font-family</b> özelliği HTML öğesi için kullanılacak yazı stilini tanımlar.</p> <p>CSS <b>font-size</b> özelliği HTML öğesi için kullanılacak yazı boyutunu tanımlar.</p> </body> </html>

Harici Stil Sayfası Oluşturma örnek

<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="https://googledrive.com/host/0B9IeeNUkg43XLWstUHVuTzg5a28" /> </head> <body> <h1>Bu başlık link verilmiş harici bir stil dosyasıyla biçimlendirildi.</h1> <p>Bu paragraf ve sayfa arka planı da aynı şekilde biçimlendirildi.</p> </body> </html>

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 adres belirtilir (http://htmlvecssegitimi.b

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 des

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ğinde, resim yüklenirken sayfada titreşim

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>