HTML5 ile birlikte bir çok yeni tag ve özellikler eklenmiştir. Bu tag ve özellikler daha esnek ve profesyonel bir tasarıma olanak sağlamaktadır.
<div> etiketi
En sık kullanacağımız yapısal etikettir. Açılımı division'dır.
Dilimizde bölüm gibi bir anlama gelir. Div'lerle yapılan siteler işte
bu etiket sayesinde yapılır. 2002 yılından beri <table> elementi yerini
<div> elementi kullanarak sitelerimizi oluşturuyoruz.
Contenteditable, özelliği True ve False olmak üzere iki farklı değer alır. Eklendiği html
taginin kullanıcı tarafından değiştirilip boyutunun ayarlanmasına izin verip
vermemesini sağlayabiliriz. Tüm taglerin varsayılan değeri false dur.
<div contenteditable=”true”> Tıklanabilir div tagi Tıkla ve Değiştir. </div>
<div contenteditable=”true”>
<img src=”imageresim.jpg”/>
</div>
Dir, özelliği rtl ve ltr olmak üzere iki farklı değer alır. Html
taginin içerisindeki yazının
Rtl sağdan sola, ltr
soldan sağa yazılmasını sağlar.
<div dir=”ltr”> tıklanabilir div tagi Tıkla ve Değiştir.</div>
<div dir=”rtl”> tıklanabilir div tagi Tıkla ve Değiştir.</div>
Burada noktanın yerine dikkat edin. biz her ikisinde de türkçeye göre sona koyduk, resimde farklı
Spellcheck, özelliği html taginin içerisindeki yazının doğru
olup olmadığını kontrol eder.
True ve false ayarları vardır. Yazının dilini belirtmek için
lang=”tr” tagini kullanabilirsiniz.
<input type=”text” spellcheck=”true”>
<input type=”text” spellcheck=”false”>
Div elementlerini sayfamızın her yerinde her amaçla
kullanıyorduk. Menü tasarımında, içerik alanında, banner alanında, header
alanında vb. tabi div etiketlerine genel olarak eklenen her sitil tüm alanları
etkiliyor ve analizi zor sayfalar meydana geliyordu.
HTML5 ile birlikte yeni tagler sayesinde bu karmaşanın
yerini biraz daha basitlik aldı. Bunun sebebi her bölüm için özelleştirilmiş
taglerin gelmesiydi. Aşağıda bir sitenin omurgasının div tagleri ve HTML5
tagleriyle oluşmuş iki farklı halini görebilirsiniz.
görüldüğü gibi aynı fakat yazması daha kolay.
<section> etiketi
Dilimizde kesim, kısım gibi bir anlama gelir. HTML5 ile
gelen yeni bir etikettir. Bazen tasarımda o kadar çok <div> kullanırız ki
bu div'lerin birbirleri ile karışmaması için <section> etiketi kurtarıcı
niteliktedir.
Hemen küçük bir örnekle bunu göstereyim:
<section>
<div>
<p>Birinci section birinci paragraf</p>
</div>
<div>
<p>Birinci section ikinci paragraf</p>
</div>
<div>
<p>Birinci section üçüncü paragraf</p>
</div>
</section>
<section>
<div>
<p>İkinci section birinci paragraf</p>
</div>
<div>
<p>İkinci section ikinci paragraf</p>
</div>
<div>
<p>İkinci section üçüncü paragraf</p>
</div>
</section>
<header> etiketi
Sitemizin logosu, sosyal medya düğmeleri, dahili arama
motoru, ticari sitelerde "üye girişi", "sepetim" gibi
bağlantıların yer aldığı etikettir. Bu etiket de HTML5 ile birlikte gelmiştir.
Daha önceden header yerine div'lere id vermek zorundaydık. Artık tek yapmamız
gereken <header> yazmak.
Şu örnekte ne demek istediğimi anlayacaksınız:
<div id="header">
<p>Eskiden
böyle header yazardık.</p>
</div>
<header>
<p>Şimdi
sadece <header>'ı kullanmamaız yeterli.</p>
</header>
<nav> etiketi
Açılımı navigation'dır. Dilimizde navigasyon (yönlendirme)
anlamına gelir. HTML5 ile gelen yeni bir etikettir. Sitemizdeki menü
<nav> elementi içine yazılır.
Şu örnekte <nav>'i daha iyi kavrayabilirsiniz:
<nav>
<ul>
<li><a href="#">Ana Sayfa</a></li>
<li><a href="#">Hakkımızda</a></li>
<li><a
href="#">Çalışmalarımız</a></li>
<li><a href="#">Referanslar</a></li>
<li><a href="#">İletişim</a></li>
</ul>
</nav>
<footer> etiketi
Sitemizin yapım yılı, telif hakları gibi ayrıntılarının yer
aldığı kısımdır. Sayfanın en altında yer alır. Ticari sitelerde referans
adresleri, "hakkımızda", "iletişim" gibi bağlantılar ile
diğer bazı önemli site içi bağlantılar bu kısımda kullanılır.
<footer>
<address>
<small>2013 | © Tüm hakları saklıdır. | <a
href="#">deneme.com</a></small>
</address>
</footer>
Footer etiketinin içinde <small> ve <address>
etiketlerinin kullanılması yerindedir
<aside> etiketi
HTML5 ile gelen yeni bir etikettir. Sayfanın sidebar olarak
tanımlanan yan tarafını belirtir. Sayfanın ya sağındadır ya da solundadır.
Genellikle blog sitelerinde kullanılır. İçeriğinde kategoriler bölümü, aram
kutusu, anketler, sabit bağlantılar ve reklam alanı ( banner ) yer
alır.
<article> etiketi
Bu etiket de HTML5 ile gelen yeni bir etikettir. Article
dilimizde makale anlamına gelmektedir. Sitemizde yer alan metinsel içerik bu
etiket içinde yer alır. <section> etiketi ile birlikte kullanılması
tavsiye edilir.
<figure> etiketi
Dilimizde figür, şekil gibi bir anlama gelmektedir. HTML5
ile gelmiştir. Sitemizde yer alan görsellerin bu etiket içinde yer alması
tavsiye edilmektedir.
<figcaption> etiketi
Bir önceki dersimizde <figure> elementi içinde bir
resim belirtmiştik. <figcaption> elementi ile bu resmin açıklamalarını
yazabiliriz. Kullanımı şu şekildedir:
<figure>
<img
src="gun_batimi.jpg"
alt="gün batımı"/>
<figcaption>Gün batımı resmi</figcaption>
</figure>
bir sonraki dersimizde görüşmek üzere esen kalın... ebi
yararlanılan kaynaklar:
Hiç yorum yok:
Yorum Gönder