SiberKültür 101: Internet kültürü, web dedikoduları ve web tasarımı ve geliştirme konusundaki tüm açlığınızı giderir.
Bilmediğiniz 12 HTML elementi
Çoğumuzun bilmediği ancak gerektiğinde hayat kurtarabilecek, işleri kolaylaştıracak ve hatta arama motoru optimizasyonunuzu destekleyecek bir sürü HTML elementi bu yazının konusu. Arkanıza yaslanın, gereksiz seslerden kurtulun ve okumaya başlayın derim.
abbr
Tek başına kullanıldığında hiç birşey ifade etmezken, title özelliğiyle kullanıldığında gerek arama motorları gerekse de kullanıcılar için büyük bir fayda sağlıyor. Çünkü <abbr title="Vesaire...">vs...</abbr> gibi bir kullanımda vs... kelimesinin üzerine geldiğinizde bir açıklama metini göreceksiniz.
acronym
abbr gibi, fakat bu sefer yapacağınız açıklamalar bir kısaltmayı tanımlıyor olmalı. Örneğin <acronym title="Cascading Style Sheets">CSS</a> yazarak kullanıcı CSS kelimesinin üzerine geldiğinde kelimenin açılımını görebiliyor.
address
Şahsen daha önce hiç kullanmadığım ancak oldukça yararlı olduğunu düşündüğüm bir element bu. Bir kullanıcının farkedemeyeceği birşey olsa da arama motorları için tadından yenmeyecek bir bilgi. Düşünsenize, firmanızın adresini bu şekilde yazdığınızda, arama motorundan XYZ Firması adres şeklinde aradığında tam olarak istediği yere düşecek. <address>Eren Emre Kanal<br />Zincirlikuyu / İSTANBUL</address> gibi bir kullanımı var.
base
Gayet dikkatli kullanılması gereken bu element, <head> elementi içerisinde kullanılmalı. Çünkü kendisi <base href="http://www.siberkultur.com/images/" /> şeklinde sayfadaki öğelerin geleceği öntanımlı adresi belirliyor. Bu kullanımdan sonra <img src="siberkultur.gif" alt="Siber Kültür" /> imaj kendini http://www.siberkultur.com/images/siberkultur.gif şeklinde çağıracaktır. Aynı şekilde <base target="_blank" /> derseniz sayfadaki tüm bağlantılar yeni pencerede açılacaktır, aksi belirtilmediği sürece.
bdo
Bu element sayesinde bir yazının yazılış yönünü değiştirebiliyorsunuz. <bdo dir="rtl">Beni ters çevir!</bdo> yazdığınızda, Beni ters çevir! şeklinde bir sonuç elde edeceksiniz. Ters yazılan bir dilde, sadece bir satırı ters yazmak için veya sadece eğlence için kullanabilirsiniz.
code
Eğer sitenizde kod parçacıkları veriyorsanız SiberKültür'de olduğu gibi <code>.sk { font-weight: bold; }</code> kullanabilir ve yazdığınız bloğun bir kod parçacığı olduğunu vurgulayabilirsiniz.
del
Bir metinden belirli bir kısımın silindiğininin vurgulamasını yapar. "aslında <del datetime="20080301">15</del> 24 kitap vardı" şeklinde kullarak silinme tarihini de belirtebilirsiniz: "aslında 15 24 kitap vardı"
fieldset
Özellikle form elementlerinin gruplanmasında kullanılan fieldset, grupladığı öğelerin etrafına bir kenarlık atayacaktır: <fieldset title="Üyelik bilgileri"> form öğeleri </fieldset>. CSS ile kenarlık atabilirim ne olacak ki demeyin, zira fieldset, legend ile kullanıldığında harikalar yaratıyor.
legend
fieldset ile belirlediğimiz alanlara bir başlık eklememizi, böylece daha anlaşılır olmasını sağlar: <fieldset title="Üyelik bilgileri"><legend>Üyelik bilgileri</legend> form öğeleri </fieldset>
pre
Formatlanmadan önce manasında kısaltılan <pre>yazılarım olduğu gibi çıkıyor ne güzel</pre> HTML olarak uğraşmadan, -karakter boşluğu, satırlar vs- herşeyi notepad'de nasıl görüyorsa o şekilde gösteriyor:
yazılarım olduğu gibi çıkıyor ne güzel
sub
Kitaplarda kaynak belirtirken rakamları tabandan küçük olarak yazmak gibi bir ihtiyacınız olursa sub sizinle: Siber<sub>Kültür</sub> yazdığınızda SiberKültür şeklinde görünecek.
sup
Matematikteki üssü gibi bir sonuç sergiler. Siber<sup>Kültür</sup> yazdığınızda SiberKültür sonucunu elde edersiniz ki bir matematik blogum olsaydı çok severek kullanırdım.
Sonuç
Görebildiğiniz gibi aslında kullanmadığımız ve görünüş olarak CSS ile hallettiğimiz bir çok şeyin standartlara uygun hali bulunuyor. Standartlar beni bağlamaz diyorsanız arama motoru optimizasyonunu düşünebilirsiniz.
Yorumlar
30/03/2008 - 13:45
fieldset ve legend uzun formlarda hayat kurtarıcı etkiye sahip, lakin şahsi kanaatim şudur ki artık address yerine microformat versiyonunu kullanırsak, hazır yahoo'da semantik sonuçları destekleyeceğini açıklamışken, microformat alışkanlığı edinmemize yararı olur..
<address>Eren Emre Kanal
Zincirlikuyu / İSTANBUL </address>
yerine
<div class="vcard">
<a class="url fn" href="http://siberkultur.com/">Eren Emre Kanal</a>
<div class="adr">
<span class="type">Ev Adresi</span>:
<div class="street-address">Barbaros Caddesi</div>
<span class="locality">Besiktaş</span>,
<span class="postal-code">34535</span>
<div class="country-name">Türkiye</div>
</div>
</div>
yazabiliyoruz, evet birazcık daha karışık ama yararlarını göreceğinizden emin olabilirsiniz..
Ayrıntılı bilgi icin Microformat Wiki'sine bakabilirsiniz.
30/03/2008 - 14:36
Aslında legend fieldset label gibi elementler formlarda çok büyük kolaylıklar sağlayabiliyor. Örneğin ben digg'in formlarını çok beğeniyorum, onlar da bunları kullanıyorlar.
02/06/2008 - 19:28
arkadaşım gerçekten blog ödüllerinde neden bir,nci oldun bir kez daha anlıyorum bunu sonuna kadar hakediyorsun blogunu çok beğendim bağlatılarımda senin blogunuda verecem iii yazı ve yorumlar
www.veyseltuna.blogspot.com
10/03/2009 - 17:29
Tebrikler Emre, gerçekten harika bir derleme olmuş. Şahsen çok faydalanacağım kaynalardan biri olacak.
22/12/2009 - 17:23
selam eren bu makalenin forum sitemde en kısa süre içerisinde yayınlıcam hakikaten bir çok site dolaştım bu kadar açıklayıcı anlatan bir blog ve kişi görmedim ellerin dert görmesin çok önemli konu bunlar .
Yorumlama aparatı