Bireysel kelimeler veya tüm metinler çok kolay bir şekilde eğik ve kalın belirtilebilir. İlk olarak kalın belirten varyanta geçelim. Bu amaçla temelde b ve strong olarak iki HTML öğesi mevcuttur.
Hoş geldiniz <b>PSD-Tutorials.de</b>! <br /> Hoş geldiniz <strong>PSD-Tutorials.de</strong>!
Tarayıcıda sonuca bakıldığında şu görüntü elde edilir:
Açıca her iki öğenin de aynı görüntüyü oluşturduğu görülmektedir. Ancak neden iki farklı öğe var? Aslında web siteleri için, tanıdık standart tarayıcıların dışında farklı görüntüleme biçimleri bulunmaktadır. Örneğin, kör insanlar için okuyucuları veya mobil cihazları düşünün. W3C tarafından sunulan HTML öğelerinin semantiği desteklemesi amaçlanmıştır. Bu nedenle b öğesi artık bir metnin kalın değil, görünür şekilde vurgulanan, artan öneme sahip olmayan bir metni temsil eder. Bu örneğin belge içinde ürün adları veya anahtar kelimeler olabileceği anlamına gelir.
strong öğesi şimdiye kadar daha fazla vurgu için kullanılırdı. Ancak em daha önce vurgulanmış, önemli metin (vurgulu) için kullanılmıştır. strong, eski HTML sürümlerinde em'in üst seviyesini oluşturuyordu. HTML5'te her iki öğeye de farklı bir anlam verilmektedir.
Önce normal vurgulu bir metin.
<p> Kediler sevimli hayvanlardır. </p>
Şimdi aynı metin tekrar, ancak bu sefer vurgu ilk kelime üzerinde olacak.
<p> <em>Kediler</em> sevimli hayvanlardır. </p>
Vurgu Kediler kelimesine verilirken em kullanılır. Bu bir tartışmada düşünülebilir, köpekler mi yoksa kediler mi daha tatlı tartışması gibi. Şimdi mevcut örnekte em öğesini sind kelimesine de uygulayabiliriz.
<p> Kediler <em> sind </em> sevimli hayvanlardır. </p>
Böyle bir metinde em ile vurgulanan bölümler tarayıcıda eğik şekilde gösterilir. Aynı görsel etkiyi i öğesi ile elde edebiliriz.
HTML5 Taslak çalışmasına göre i öğesi artık eğik anlamına gelmemektedir.
<p> Hoş geldiniz <i>PSD-Tutorials.de</i> </p>
Artık bu öğe başka bir duygu iletişimi yapmak anlamına gelmektedir. Örneğin teknik terimlerin veya taksonomik adların belirlenmesi için i öğesi ilginç olabilir.
Hepsi oldukça teorik, biliyorum. Temel olarak HTML5 yönergelerine uymaya çalışmalısınız. Öte yandan, b yerine strong kullanırsanız kimse size kızmayacaktır.
<p> <em>em ile satır</em><br /> <i>i ile satır</i><br /> <strong>strong ile satır</strong><br /> <b>b ile satır</b> </p>
Sonunda burada tarayıcı üreticilerin hareket etmesi gerekmektedir.
Belirtilen öğelerle donatılmış metinlerin gerçek tasarımından ziyade, sonuç olarak zaten CSS sorumludur.
abbr ile Kısaltmalar
Bir kısaltmayı vurgulamak için, şimdiye kadar kısaltmalar için kullanılan abbr öğesine başvurulur.
Alman-Avusturya Bürosu <abbr title="World Wide Web Consortium">W3C</abbr> Nisan 2009'dan beri Potsdam Yüksekokulu'nda yer almaktadır.
abbr öğesini doğru yorumlayan tarayıcılar, abbr öğesi içine alınmış metni altı çizili olarak gösterir.
Ayrıca, abbr öğesine bir title özelliği atanmalıdır. Genellikle kısaltma için tam ifade bu özelliğe yazılır. Ziyaretçi fareyle kısaltmanın üzerine geldiğinde, ifade bir araç ipucu penceresinde görüntülenir.
address ile Adres Bilgileri
Adres öğesiyle adres bilgileri vurgulanabilir.
<address> 4eck Media GmbH & Co. KG<br /> Hauptstraße 20<br /> 17309 Viereck<br /> </address>
Tarayıcılar address öğesinin içeriğini genellikle eğik olarak gösterir.
code ile Program Kodunu Vurgulamak
code öğesi program kodunu vurgulamak için kullanılır. Bu anlamda, önceki HTML sürümlerine kıyasla bir değişiklik olmamıştır. Hala code aynı amaca hizmet etmektedir.
<pre>
Bu bir HTML başlık kısmıdır:
<code>
<html>
<head>
<title></title>
</head>
</code>
</pre>
Genellikle program kodunda kullanılan girintileri korumak için code öğesini pre ile birlikte kullanılır.
HTML5 özellikleri, code öğesiyle birlikte class özniteliğinin kullanılmasını önerir. Bu özniteliğe code öğesinde kullanılan dil atanabilir. Bu tür vurguların nasıl görünebileceğine dair tipik örnekler şunlardır:
• language-html
• language-css
• language-javascript
• language-php
• language-pascal
Tarayıcıların bu talimatları nasıl uygulayacakları W3C tarafından belirlenmemiştir.
<pre>
Bu bir HTML başlık kısmıdır:
<code class="language-html">
<html>
<head>
<title&gt;</title>
</head>
</code>
</pre>
Şu anda class özniteliğinin tarayıcıda herhangi bir görünür etkisi yok. Ancak insanlar, sayfanın kaynak koduna bakarak program kodunun hangi dilde olduğunu anlayabilirler.
small ile Küçük Harf Kullanımı
small öğesi aslında metni normalden daha küçük göstermek amacıyla kullanılmıştır. HTML5'te küçük yazıları belirtmek için small özel olarak kullanılır. Bu küçük yazılar şunlar olabilir:
• Telif hakkı bilgileri
• Sorumluluk reddi ifadeleri
• Lisans koşulları
• Genel kullanım koşulları
W3C, small'ın uzun metin parçaları için kullanılmaması gerektiğini vurgular.
<small> Telif Hakkı: PSD-Tutorials.de<br /> 4eck Media GmbH & Co. KG<br /> Hauptstraße 20<br /> 17309 Viereck </small>
Metinleri Altı Çizili Gösterme
Metinleri u ögesiyle altı çizili olarak gösterebilirsiniz. İşte bir örnek:
<p>Hoş geldiniz PSD-Tutorials.de</p>
Sonuç, tarayıcıda aşağıdaki gibi görünür:
Sonuç istenilen etki doğru şekilde gösterilmektedir. Ancak mesele bir engeli bulunmaktadır. İnternette altı çizili metinler genellikle bağlantılar için kullanılır. Şimdi bir metin veya kelimeyi altı çizili olarak gösterirseniz, ziyaretçiler bu metnin bir bağlantı olduğunu düşünebilirler. Bu bağlantıyı tıklamaya çalışmak başarısız olacaktır. Bu nedenle alt çizgiyi kullanmaktan kaçınmalısınız.
