full screen background image
Search
Wednesday 28 June 2017
  • :
  • :

HTML5 CSS3 – DERS-4 Temel Etiketler ve a – abbr – address – area – base etiketleri kullanımı

HTML5 Te <a> <abbr> <address> <area> <base> etiketlerinin kullanılışı, aldığı değerler ve html5 e ait diğer yapısal etiketler.

 

<a>…</a> Etiketi:

<a>….</a> Etiketi HTML‘in ilk zamanlarından beri kullanılan bir etikettir. Bu etiketimiz html in vazgeçilmezidir de diyebiliriz. Peki ne işe yarar bu etiket; a etiketi, kendi web sitemizin herhangi bir sayfasına ya da başka bir siteye bağlantı vermemizi sağlar. web sitelerindeki menüler, kategori bağlantıları a etiketi sayesinde diğer sayfalarla etkileşim halindedir.

<a>…</a> Etiketi Örnek

<code class="xml plain"><</code><code class="xml keyword">a</code> <code class="xml color1">href</code><code class="xml plain">=</code><code class="xml string">"index.html"</code><code class="xml plain">>ANASAYFA</</code><code class="xml keyword">a</code><code class="xml plain">></code>

 

Destekleyen Tarayıcılar

Chrome : 6.0
Explorer : 9.0
Firefox : 4.0
Safari : 5.0
Opera : 11.1

 

<abbr>…</abbr> Etiketi:

<abbr>…</abbr> Etiketi Kısaltmaların belirtilmesinde kullanılmaktadır. Örneğin bir metniniz var, ve bu metninizde HTML kısaltmasını kullanacaksınız. Bu kısaltmayı abbr etiketi içerisinde yazarak hem açılımını vermiş olacaksnız hemde google gibi arama motorları gözünde siteniz daha değerli görünecektir. çükü HTML5 kullanmış olacaksınız ve google gibi arama motorları bunun kullanımını artık sitelerde görmek istiyor. Yenilikçi olun ve elinizden geldiği kadar kullanın

<abbr>…</abbr> Örnek

 <code class="xml plain"><</code><code class="xml keyword">abbr</code> <code class="xml color1">title</code><code class="xml plain">=</code><code class="xml string">"Hyper Text Markup Language"</code><code class="xml plain">>HTML</</code><code class="xml keyword">abbr</code><code class="xml plain">></code> 

 

<address>…</address> Etiketi:

<address>…</address> Etiketi adından da anlaşılacağı üzere adres bilgilerini belirten etiketimizdir. W3School da belirtildiğine göre bu etiket genelde article etiketi içerisinde kullanılıyormuş ama telaş yapmayın, bu etiketimizi footer etiketi, header etiketi ya da section etiketi içerisinde de kullanabilirsiniz. hatta div içerisinde de kullanabilirsiniz. Hiç kullanmamaktan iyidir 🙂 Hemen örneğimize bakalım

<address>…</address> Örnek

</pre>
<div class="line number1 index0 alt2"><code class="xml plain"><</code><code class="xml keyword">address</code><code class="xml plain">></code></div>
<div class="line number2 index1 alt1"><code class="xml spaces"> </code><code class="xml plain">Tel    : 0545 545 45 45</code></div>
<div class="line number3 index2 alt2"><code class="xml spaces"> </code><code class="xml plain">Mail   : bilgi@birwebdesign.com</code></div>
<div class="line number4 index3 alt1"><code class="xml spaces"> </code><code class="xml plain">Adres  : web tasarım mah. html sokak no: 5/3</code></div>
<div class="line number5 index4 alt2"><code class="xml plain"></</code><code class="xml keyword">address</code><code class="xml plain">></code></div>
<div class="line number5 index4 alt2">

 

<area>…</area> Etiketi:

<area>…</area> Etiketi Resimler üzerindeki koordinat verilen noktalara link (bağlantı) vermek için kullanılır. Aşağıdaki örnekte img tag’ı ve altında map tagları altında area etiketlerini göreceksiniz. img tagı içerisindeki usemap özelliği ile map tag’ı içeriindeki name özellikleri bir çeşit id olup, img dosyasına hangi map tag’ını kullanacağını gösterir bunların yazılışlarının aynı olması ve türkçe karakter içermemesi önemlidir.

area etiketleri içerisine bakacak olursak shape kısmında harita üzerine verilecek linklerin alanlarının şekillerini belirtmektedir. “circle” yuvarlak, “rect” kare ya da dikdörtgen ve “poly” sizin belirleyeceğiniz herhangi bir şekil olacaktır.

coords özelliğine baktığımızda da IP adresine benzeyen numaralar görmekteyiz bunlarda resim üzerindeki hangi alana link vereceğinizi belirtir. ve örnekte img boyutunun 640 * 480 olduğunu görüyoruz, Bu alan içerisinde örnek olarak “coords=’50,10,82,126′” bu coordinatı incelersek, Resim üzerinde ilk belirleyeceğimiz nokta “50,10” yani soldan 50px yukardan 10 px, ikinci belirleyeceğimiz nokta ise “82,126” soldan 82px yukardan 126px dir. bunu belirlemek için photoshop gibi bir resim editörüne ihtiyaç duyulabilir aksi halde deneme yanılma ile biraz zaman alır. Ama ben sizler için bu işi otomatik yapacak bir site buldum ve videomda nasıl kullanacağınızı açıkladım arkadaşlar.

<area>…</area> Örnek

<code class="xml plain"><</code><code class="xml keyword">img</code> <code class="xml color1">src</code><code class="xml plain">=</code><code class="xml string">"map.gif"</code> <code class="xml color1">width</code><code class="xml plain">=</code><code class="xml string">"640"</code> <code class="xml color1">height</code><code class="xml plain">=</code><code class="xml string">"480"</code> <code class="xml color1">alt</code><code class="xml plain">=</code><code class="xml string">"Map Üzerine Link Verme"</code> <code class="xml color1">usemap</code><code class="xml plain">=</code><code class="xml string">"#map"</code><code class="xml plain">></code></pre>
<div class="line number4 index3 alt1"><code class="xml plain"><</code><code class="xml keyword">map</code> <code class="xml color1">name</code><code class="xml plain">=</code><code class="xml string">"map"</code><code class="xml plain">></code></div>
<div class="line number6 index5 alt1"><code class="xml plain"><</code><code class="xml keyword">area</code> <code class="xml color1">shape</code><code class="xml plain">=</code><code class="xml string">"rect"</code> <code class="xml color1">coords</code><code class="xml plain">=</code><code class="xml string">"0,0,82,126"</code> <code class="xml color1">href</code><code class="xml plain">=</code><code class="xml string">"anasayfa.htm"</code> <code class="xml color1">alt</code><code class="xml plain">=</code><code class="xml string">"Sun"</code><code class="xml plain">></code></div>
<div class="line number8 index7 alt1"><code class="xml plain"><</code><code class="xml keyword">area</code> <code class="xml color1">shape</code><code class="xml plain">=</code><code class="xml string">"circle"</code> <code class="xml color1">coords</code><code class="xml plain">=</code><code class="xml string">"90,58,3"</code> <code class="xml color1">href</code><code class="xml plain">=</code><code class="xml string">"hakkimizda.htm"</code> <code class="xml color1">alt</code><code class="xml plain">=</code><code class="xml string">"Mercury"</code><code class="xml plain">></code></div>
<div class="line number10 index9 alt1"><code class="xml plain"><</code><code class="xml keyword">area</code> <code class="xml color1">shape</code><code class="xml plain">=</code><code class="xml string">"poly"</code> <code class="xml color1">coords</code><code class="xml plain">=</code><code class="xml string">"124,58,8"</code> <code class="xml color1">href</code><code class="xml plain">=</code><code class="xml string">"iletisim.htm"</code> <code class="xml color1">alt</code><code class="xml plain">=</code><code class="xml string">"Venus"</code><code class="xml plain">></code></div>
<div class="line number11 index10 alt2"><code class="xml plain"></</code><code class="xml keyword">map</code><code class="xml plain">></code></div>
<div class="line number11 index10 alt2">

 

<base>…</base> Etiketi:

<base>…</base> Etiketi Sayfamızın default (varsayılan) bağlantı URL ini belirtir. ve….tagları arasında kullanılır. video da detaylı açıklamayı görebilirsiniz.

<base>…</base> Örnek

</pre>
<div class="line number1 index0 alt2"><code class="xml plain"><</code><code class="xml keyword">head</code><code class="xml plain">></code></div>
<div class="line number2 index1 alt1"><code class="xml spaces">    </code><code class="xml plain"><</code><code class="xml keyword">title</code><code class="xml plain">>Base etiketi açıklaması</</code><code class="xml keyword">title</code><code class="xml plain">></code></div>
<div class="line number3 index2 alt2"><code class="xml spaces">    </code><code class="xml plain"><</code><code class="xml keyword">base</code> <code class="xml color1">href</code><code class="xml plain">=</code><code class="xml string">"<a href="http://www.bilgi@birwebdesign.com/">http://www.bilgi@birwebdesign.com</a>"</code><code class="xml plain">></code></div>
<div class="line number4 index3 alt1"><code class="xml spaces">    </code><code class="xml plain"><</code><code class="xml keyword">base</code> <code class="xml color1">href</code><code class="xml plain">=</code><code class="xml string">"_blank"</code><code class="xml plain">></code></div>
<div class="line number5 index4 alt2"><code class="xml plain"></</code><code class="xml keyword">head</code><code class="xml plain">></code></div>
<pre>


avatar

Yazar; 15 yıllık web & grafik tecrübesiyle çeşitli bakanlıkların web projelerinin yanı sıra, ünlü giyim firmalarının da (crispino, formenti, MXC Sports ... v.s ) web tasarım ve yazılımları ile birlikte 1000'i aşkın referans ile, Müşteri memnuniyetine devam ediyor.


Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

*

Magento Themes