HTML Ders Notları 2

Gönderen Sistem




HTML Mouse ve Klayye Olayları

Kısa kısa yardımcı etiketler ve anlamları



onclick= Elemente klavye veya fare ile tıklandığında tetiklenir.
ondblclick= Elemente fare ile çift tıklandığında tetiklenir.
onmousedown= Element üzerinde fare tuşuna basıldığında tetiklenir.
onmouseup= Basılı olan fare tuşu bırakıldığında tetiklenir.
onmouseover= Elementin kapladığı alana girildiğinde tetiklenir.
onmousemove= Element üzerinde fare işaretçisi hareket ettirildiğinde tetiklenir.
onmouseout= Elementin kapladığı alandan çıkıldığında tetiklenir.
onkeypress= Element üzerindeyken klavyeden bir tuşa basıldığında tetiklenir.
onkeydown= Element üzerindeyken klavyeden bir tuşa ilk basıldığında tetiklenir.
onkeyup= Basılı olan klavye tuşu bırakıldığında tetiklenir.
onfocus= Elemente odaklanıldığında tetiklenir.
onblur= Element odaklanmasını yitirdiğinde tetiklenir.



 


Birkaç örnek verelim ;


Mouse Üzerine Gelince Değişen Resim Kodu


<a href="BURAYA SITE YADA ADRES LINKI YAZIN!"><img boyd=""<img border="0" onmouseout="this.src='IKINCI GOZUKECEK RESIM URL'SINI BURAYA YAZIN';" onmouseover="this.src='ILK GOZUKECEK RESIM URL'SI BURAYADA YAZIN';" alt="" src="ILK GOZUKECEK RESIM URL'SI BURAYA YAZIN" /></a>

<style>
.degis {
width: 468px;
height: 60px;
background: url(RESİM1 URL);
}
.degis:hover {
width: 468px;
height: 60px;
background: url(RESİM2 URL);
}
</style>
<br />
<div class="degis">
</div>



Mouse Üzerine gelince duran kayan yazı kodu


 <marquee onmouseover="this.stop()" onmouseout="this.start()" width="300" height="300" direction="Up" scrollamount="1" scrolldelay="60" loop="99999">
YAZININ GELECEĞİ YER / HTML KODLARDA GELEBİLİR</marquee>



Mouse Üzerine gelince yazıda bilgi kutucuğu çıkartmak

<font title="Yazımızın burada olduğunu belirtmek istedik">Yazımız normal şekilde burada yazıyor.</font>


Mouse Üzerine gelince resimde bilgi kutucuğu çıkartmak


 <img src="Günbatımı.jpg" width="231" height="172" title="Resmimizin adı: Gün Batımı" />



Mouse Üzerine gelince renk değiştiren buton


 <input type="button" value="Utangaç buton" onmouseover="this.style.background='red'"/>



Üzerine Gelince Renk Değiştiren Yazı
<HTML>
<HEAD>
<TITLE>Üzerinden gelince renk değiştiren yazı</TITLE>
<STYLE>
A:link {color: blue}
A:visited {color: purple}
A:hover {color:red}
A:active {color:yellow}
</STYLE>
</HEAD>
<BODY>
<A href="" _fcksavedurl="">Fare imleci bu yazının üzerine geldiğinde renk değiştirecek</A>
</BODY>
</HTML>

HTML Başlık Yapmak

HTML de başlıklar <H1> 'den <H6> 'ya kadar en büyükten en küçüğe doğru sıralanan ve sayfadaki yerine göre kullanacağımız, W3C standardında başlıklarımızdır. Bu başlıklardan sonra ayrıca bir satır atlanmaktadır...


HTML Kodu

<h1>H1 Başlık</h1>
<h2>H2 Başlık</h2>
<h3>H3 Başlık</h3>
<h4>H4 Başlık</h4>
<h5>H5 Başlık</h5>
<h6>H6 Başlık</h6>


HTML Paragraf Kullanmak

HTML Paragraf yeni bir satıra başlangıcı ifade eder. Bunu HTML dilinde <p> ile başlatır ve </p> ile bitiririz. Aynı başlık yapısında olduğu gibi paragraflardan sonra da kendiliğinden satır atlar.

Bu bir paragraf örneği..

<p>Bu bir paragraf örneği..</p>
<p>Bu da başka bir paragraf örneği..</p>



NOT: Açılan bir kodu kapatmayı unutmayınız: Satır atlama (<br />) ve meta dışında <b>...</b> gibi kullanılmalı. Aksi takdirde sayfa düzeninde bozulmalar oluşabilir.


HTML Satır Atlamak


<div class="separator" style="clear: both; text-align: center;">
</div>
HTML Satır Atlamak bir paragrafta ya da paragraf kullanılmadan başlanılan bir yazıda, HTML dilinde satır atlamak için &lt;br /&gt; tagını kullanırız.<br />
<br />
<br />
HTML Kodu<br />
<div>
<br />
<blockquote class="tr_bq">
&lt;p&gt;Bu bir&lt;br /&gt; paragraf ve satır atlama&lt;br /&gt;&nbsp;</blockquote>
<br />
Temelde &lt;br&gt; ile &lt;br /&gt; arasında fark yoktur. Fakat (/) eklenmesinin nedeni, satır atlama kodunun bir kapanış tagı olmamasıdır (yani &lt;/br&gt; şeklinde bir kullanım olamaz). W3C Standartlarına göre &lt;br /&gt; daha doğru bir kullanımdır (XHTML gereği).</div>



HTML Resim Eklemek


<img src="Ressim URL" >


Resimlere link vermek için


Resimlerimize alt="" özelliği kullanarak fare imleci ile üstüne tuttuğumuzda görünecek açıklayıcı bir yazı yazılabilir. Resmimize link verebiliriz. Bunun için normal link komutu arasına resmimizi alırız.

<a href="#"><img src="html.jpg" alt="Örnek Resim"></a>


Görüldüğü gibi kalın bir çizgi görünüyor resmimizin etrafında. Bunu stil dosyasından ayarlayabileceğiniz gibi, border="0" diyerek tamamen yok edebilirsiniz.

<a href="#"><img src="html.jpg" alt="Örnek Resim" border="0"></a>


Resmimizi yazımızın sağına ya da soluna dayamamız mümkün. Bunun için align="hiza" özelliğinden yararlanırız. Bu değer left ise sağa, right ise sola dayalı olacaktır.

Resmi boyutlandırmak için width = genişlik  height = yükseklik değerlerini px olarak girilir.

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidkBtVujCiAYo-IsP_4axIWddOz-tiQP3k9I_MFkR8LMZrg1ERjIHXYpQPEN57C2lY7GBOSi0IoER1cq7oGJyXNMnV__XFnq1W7GBvWPnl3EtT56CTTZXU1Q4GWPkhxiNiJ4WoXtbRdxQ/s320/20120530165606921.gif"width="30" height="30">



HTML Akıllı Telefonlar İçin Direk Arama Linki Yapmak


<a href="tel:+09-555-1234567">0555 55 555</a>


Tag Archives: onmouseover kullanımı



HTML Kodlarının Açıklamaları

<TABLE>
id=         Eşsiz kimliğini belirtir.
class= Sınıf adını belirtir.
style= CSS kuralları tanımlar.
title= Kısa bilgi belirtir.
lang= İçerdiği metnin lisanını belirtir.
dir=         İçerdiği metnin yönünü belirtir.
summary=Tablo hakkında özet bilgi belirtir.
height= Yüksekliğini belirtir.
width= Genişliğini belirtir.
border= Kenarlık genişliğini belirtir.
frame= Kenarlıkların uygulanacağı kenarları belirtir.
rules= Tablo içinde kenarlıkların uygulanma şeklini belirtir.
cellspacing= Hücreler arasındaki mesafeyi belirtir.
cellpadding= Hücre içi dolgu (padding) genişliğini belirtir.

İçerik Tablo içeriğini oluşturan HTML kodlarını belirler.
</TABLE>



HTML & JavaScript Olayları


<TABLE>
onclick=                 Elemente klavye veya fare ile tıklandığında tetiklenir.
ondblclick=         Elemente fare ile çift tıklandığında tetiklenir.
onmousedown= Element üzerinde fare tuşuna basıldığında tetiklenir.
onmouseup=         Basılı olan fare tuşu bırakıldığında tetiklenir.
onmouseover= Elementin kapladığı alana girildiğinde tetiklenir.
onmousemove= Element üzerinde fare işaretçisi hareket ettirildiğinde tetiklenir.
onmouseout= Elementin kapladığı alandan çıkıldığında tetiklenir.
onkeypress= Element üzerindeyken klavyeden bir tuşa basıldığında tetiklenir.
onkeydown= Element üzerindeyken klavyeden bir tuşa ilk basıldığında tetiklenir.
onkeyup= Basılı olan klavye tuşu bırakıldığında tetiklenir.
</TABLE>




HTML Yazıya Çift Link Verme


<script>
function ikilink(){
window.open('URL1');
document.location.href ="URL2";
}
</script>
<a href="javascript:;" onclick="ikilink();">TIKLA</a>



Bulunsun bir köşede birilerine faydası olur belki.

Yorumlar

  1. Yusuf Türk6.8.13

    Teşkkür ediyorum güzel bilgiler.

    YanıtlaSil
  2. Işık Bandı6.11.14

    HTML de tüm linklerin altını çizme kodu

    <style type="text/css">
    a:hover{text-decoration:underline;}
    </style>

    YanıtlaSil
    Yanıtlar
    1. Sistem22.2.15

      <head> .... </head> ARASINA eklenir

      Sil
  3. Sistem22.2.15

    <style type="text/css">
    a:link {
    text-decoration: none;
    }
    a:visited {
    text-decoration: none;
    }
    </style>

    linklerin altındaki çizgiyi kaldırmak için

    YanıtlaSil
  4. Adsız28.11.15

    Benim konuyla ilgili başka bir açmazım var. Diyelimki sayfanın farklı yerlerinde renk değiştiren ya da saydamlaşan 2 tane buton var. Mause ile bu butonlardan herhangi birisinin üzerine gelince diğer butonda renk değiştirsin yada saydamlaşsın. Yani özet olarak 2 buton birbiriyle kontak halinde olsun.
    Ne işe yarayacak bu derseniz eğer... 2 butonda aynı sayfaya yönlendirme yapıyor. Çok basit birşeymiş gibi geliyor ama konuyla ilgili hiç birşey bilmiyorum hiç bir bilgim yok.

    YanıtlaSil
    Yanıtlar
    1. WebKenti28.11.15

      Anladım. Olabilecek bir durum.
      Profesyonel Yardımlarımız Ve Danışmanlık Hizmetlerimiz Ücretli olduğunu hatırltmak isteriz.

      Sil

Yorum Gönder

🔺 YUKARI ÇIK 🔺