HTML “a” elementi kodu kullanımı örneği (HTML “a” tag code usage example)

HTML “a”, sayfanızda yazdığınız bir yazı metni üzerine tıklandığında bir işlem yaptırmak istediğinizde size yardımcı olacak olan HTML etkidir.
HTML “a”, İngilizce “anchor” kelimesi ile ifade edilir. Yazılım alanıda Türkçe karşılık olarak ise “bağlayıcı”, “tutturucu” anlamları kazanır.

En basit kullanımı aşağıdaki gibidir.

<a href="http://www.yazilimcity.com">click me</a>

HTML “anchor” elementi ile aşağıdaki gibi JavaScript fonksiyonuda çağırabilirsiniz.

<a href="#" onclick="callFunction()">call function</a>

HTML “a” elementi “href” ve “onclick” kullanımı:

HTML a elementi yani anchor(tutturucu, bağlayıcı) elementi kullanımında sayfanızı bir yere yönlendirmek istemediğinizde,HTML anchor elementine “onclik” niteliği ekler ve değerinde ise JavaScript çağırabilirsiniz ancak “a” elementi “href” niteliği isteyeceği için ise “#” değerini verdiğinizde sayfanız da JavaScript çalıştırmış olacaksınız ancak bulunduğunuz sayfada aşağıda bulunuyor iseniz sayfa yukarıya kayarak üste konumlanacaktır.

Sayfanızda a elementi ile href ve onclick kullanarak JavaScript çağırıp, sayfanızında bulunduğu konumunu korumasını istiyorsanız size “javascript:void(0)” değeri yardımcı olacaktır.Örnek kodlar aşağıdadır.

<a href="#">mevcut sayfanızda kalır ve eğer sayfanız aşağıda konumlu ise kaydırma çubuğu sayfanın en üstüne konumlanacaktır.</a>
<a href="#" onclick="doSomething()">sayfanızda kalırsınız ve eğer sayfanız aşağıda konumlu ise kaydırma çubuğu sayfanın en üstüne konumlanacaktır ve doSometing() JavaScript fonksiyonunu çağırmış olursunuz.</a>
<a href="http://www.yazilimcity.net">mevcut sayfanızda sayfanızda kalır ve eğer sayfanız aşağıda konumlu ise kaydırma çubuğu sayfanın en üstüne konumlanacaktır.</a>

“Anchor” un alabileceği nitelikler aşağıdaki gibidir.

Nitelik

Alabileceği değerler

Açıklama

charset HTML5 te desteklenmemektedir.
coords HTML5 te desteklenmemektedir.
download
href URL değeri alır. Hangi URL adresine gidileceği belirtilir.
hreflang
media
name HTML5 te desteklenmemektedir.
rel alternate
author
bookmark
help
license
next
nofollow
noreferrer
prefetch
prev
search
tag
rev HTML5 te desteklenmemektedir.
shape default
rect
circle
poly
HTML5 te desteklenmemektedir.
target _blank
_parent
_self
_top
framename
type

tıklanmadan önce, tıklandıktan sonra, üzerine gelindiğinde, aktif olduğunda
/* unvisited link */
a:link {
color: #000;
}

/* visited link */
a:visited {
color: #000;
}

/* mouse over link */
a:hover {
color: #f9b700;
}

/* selected link */
a:active {
color: #f9b700;
}

Share on Facebook0Tweet about this on TwitterShare on Google+0Share on StumbleUpon0Share on Reddit0

Leave a Reply


*