HTML <aside> Tag

Örnek

<p>ATATÜRK ÜNİVERSİTESİ TEKNOKENT</p>
<aside>
  <h4>Erzurum ATATEKNOKENT</h4>
</aside>

Sayfanın sidebar olarak adlandırılan yan tarafını belirtmek için kullanılır. Sayfanın sadece sağında veya solunda yer alabilir.

Codepen Ön izleme

<p>ATATÜRK ÜNİVERSİTESİ TEKNOKENT</p>
<aside>
  <h4>Erzurum ATATEKNOKENT</h4>
</aside>

See the Pen HTML aside Tag by W3TR (@w3tr) on CodePen.

HTML <area> Tag

Örnek

<img src="http://lorempixel.com/output/cats-q-c-300-300-9.jpg" width="145" height="126" alt="Planets"
usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="http://lorempixel.com/output/cats-q-c-300-300-3.jpg" alt="Sun">
  <area shape="circle" coords="90,58,3" href="http://lorempixel.com/output/cats-q-c-300-300-3.jpg" alt="Mercury">
  <area shape="circle" coords="124,58,8" href="http://lorempixel.com/output/cats-q-c-300-300-3.jpg" alt="Venus">
</map>

Resmin üzerinde belirli bir alanı seçmek için kullanılır. Bu etiket sadece <map> elementi içinde kullanılırsa geçerli olur.

Codepen Ön izleme

 

<img src="http://lorempixel.com/output/cats-q-c-300-300-9.jpg" width="145" height="126" alt="Planets"
usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="http://lorempixel.com/output/cats-q-c-300-300-3.jpg" alt="Sun">
  <area shape="circle" coords="90,58,3" href="http://lorempixel.com/output/cats-q-c-300-300-3.jpg" alt="Mercury">
  <area shape="circle" coords="124,58,8" href="http://lorempixel.com/output/cats-q-c-300-300-3.jpg" alt="Venus">
</map>

See the Pen HTML area Tag by W3TR (@w3tr) on CodePen.

Nitelikler

Nitelik Değer Açıklama
alt text Alan için alternatif bir isim belirlemek için kullanılır. Href özelliğinin olması gerekir.
coords coordinates Alanın koordinatlarını belirlemek için kullanılır.
download filename Kullanıcı bağlantıya tıkladığında belirlediğimiz hedef deki dosyayı yüklemek için kullanılır.
href URL Bağlantı oluşturmak için kullanılır.
hreflang language_code Oluşturduğumuz bağlantının URL dilini belirlemek için kullanılır.
media media query
nohref value HTML5 tarafından desteklenmiyorHerhangi bir alanla ilgili bir bağlantı olmadığını belirtmek için kullanılır.
rel alternate
author
bookmark
help
license
next
nofollow
noreferrer
prefetch
prev
search
tag
Bulunduğumuz sayfayla bağlantı oluşturduğumuz sayfa arasındaki ilişkiyi bitirmek için kullanılır.
shape default
rect
circle
poly
Resim haritasında kullanacağımız şekli belirtmek için kullanılır
shape default
rect
circle
poly
Resim haritasında kullanacağımız şekli belirtmek için kullanılır
target _blank
_parent
_self
_top
framename
Bağlantı oluşturulan sayfanın nerede açılacağını belirtir.
type media_type Bağlantı oluşturulan sayfanın MIME tipini belirlemek için kullanılır.

HTML <address> Tag

Örnek

<address>
  Belgenin yazarı <a href="mailto:samed.gozutok@arabirim.com.tr">Samed GÖZÜTOK</a>
  Ziyaret et:
  w3tr.com
  ERZURUM, Türkiye
</address>

Bu etiket bir belge yada yazının yazarı için iletişim bilgilerini tanımlamak için kullanılır. Etiket <body> etiketinin içindeyse belge için iletişim bilgilerinin kullanılacağını belirtir. Etiket <article> etiketinin içindeyse makale için iletişim bilgilerinin kullanılacağını belirtir.

Codepen Ön izleme

 

<address>
  Belgenin yazarı <a href="mailto:samed.gozutok@arabirim.com.tr">Samed GÖZÜTOK</a>
  Ziyaret et:
  w3tr.com
  ERZURUM, Türkiye
</address>

See the Pen HTML adress Tag by W3TR (@w3tr) on CodePen.

HTML <abbr> Tag

Örnek

<p>Bir kısaltma: <abbr title="TOPRAK MAHSÜLLERİ OFİSİ">TMO </abbr></p>

Bu etiket  “TMO” veya “DHMİ” gibi kısaltmaları tanımlamak için kullanılır.

Codepen Ön izleme

 

<p>Bir kısaltma: <abbr title="TOPRAK MAHSÜLLERİ OFİSİ">TMO </abbr></p>

See the Pen jbBoYr by W3TR (@w3tr) on CodePen.

HTML <a> Tag

Örnek

w3tr.com bir bağlantıdır.

<a href="http://www.w3tr.com/">W3tr.com Eğitimleri</a>

Bağlantı metinleri oluşturmak için kullanılır, bağlantılar farklı sayfalara geçiş için kullanılır.
Değişiklik yapmadığımız takdirde tüm tarayıcılarda linkler şu şekilde gözükür:

  • Ziyaret edilmemiş linkler mavi renkte ve altı çizili,
  • Ziyaret edilmiş linkler mor ve altı çizili,
  • Link aktifken kırmızı renkte ve altı çizili şekilde gözükür.

Codepen Ön izleme


1
<a href="http://www.w3tr.com/">W3tr.com Eğitimleri</a>

See the Pen epvaRW by W3TR (@w3tr) on CodePen.

Nitelikler

Nitelik Değer Açıklama
charset char_encoding HTML5 desteklenmiyorSayfanın karakter sayısını belirtmek için kullanılır.
coords URL HTML5 desteklenmiyorLink verilen sayfanın URL sini belirlemek için kullanılır.
href coordinates HTML5 desteklenmiyorResmin konumunu ve boyutunu belirlemek için kullanılır.
hreflang language_code HTML5 desteklenmiyorBağlantının dil kodlamasını belirlemek için kullanılır.
media media_query HTML5 desteklenmiyorHedefin ismini tanımlamak için kullanılır.
name section_name HTML5 desteklenmiyorHedef gösterilen sayfanın diğer cihazlarla optimize edilmesi için kullanılır.
rev text HTML5 desteklenmiyorHedef verilmiş sayfa ile geçerli sayfa arasındaki ilişkiyi bitirmek için kullanılır.
shape default
rect
circle
poly
HTML5 desteklenmiyorResim haritasında kullanacağımız şekli belirtmek için kullanılır.
target _blank
_parent
_self
_top
framename
Bağlantı oluşturulan sayfanın nerede açılacağını belirtir
target default
rect
circle
poly
HTML5 desteklenmiyorResim haritasında kullanacağımız şekli belirtmek için kullanılır.
type media_type Bağlantı oluşturulan sayfanın MIME tipini belirlemek için kullanılır.