Uzun bir ara verdiğim HTML derslerine devam ediyorum. İlk üç derste neler görmüştük, hatırladıktan hemen sonra dördüncü dersin konularına geçeceğim.

İlk dersimizde; HTML'in ne olduğunu öğrendik. İlk HTML sayfamız üzerinde html, head, title, body temel etiketlerini gördük.

İkinci dersimizde; HTML etiketlerinin ne olduğunu, nasıl kullanıldığını öğrenmeye başladık.

Üçüncü dersimizde başlıklar (h), paragraflar (p), satır sonları (br), html yorumları, yatay çizgi (hr) etiketlerinin kullanımını gördük ve bazı ipuçları vermeye çalıştık.

Bu dersimizin konusu "Metin Biçimlendirme Etiketleri". Bu etiketler adından da anlaşıldığı üzere metnin koyu, italik, altsimge, üstsimge, alıntı vs. gibi görüntülenmesi için kullanılan etiketlerdir. Şimdi bunları adım adım görmeye başlayalım.

Metin Biçimlendirme Etiketleri

PLAIN TEXT
HTML:
  3.  
  4. <b>Bu yazı b etiketiyle yazılmıştır.</b>
  5.  
  6. <br />
  7.  
  8. <strong>Bu yazı strong etiketiyle yazılmıştır.</strong>
  9.  
  10. <br />
  11.  
  12. <big>Bu yazı big etiketiyle yazılmıştır.</big>
  13.  
  14. <br />
  15.  
  16. <em>Bu yazı em etiketiyle yazılmıştır.</em>
  17.  
  18. <br />
  19.  
  20. <i>Bu yazı i etiketiyle yazılmıştır.</i>
  21.  
  22. <br />
  23.  
  24. <small>Bu yazı small etiketiyle yazılmıştır.</small>
  25.  
  26. <br />
  27.  
  28. Bu yazı,
  30. altsimge
  31. </sub>
  32. içermektedir.
  33.  
  34. <br />
  35.  
  36. Bu yazı,
  38. üstsimge
  39. </sup>
  40. içermektedir.
  41.  
  42. </body>
  43. </html>

Şimdi temiz bir Not Defteri sayfası açın ve üstteki kodların tümünü bu sayfaya kopyalayın. Dosyayı "ders04.html" olarak kaydedin ve açın. Görüntü aynen şu şekilde olacaktır:

Önceden Biçimlendirilmiş Metin
Önceden biçimlendirilmiş metin etiketi (pre) kullanıldığında bu pre etiketlerinin arasında kalan metin kısmındaki boşluklar aynen korunur. Bunu bir örnek üzerinde görürsek daha iyi anlaşılacağını düşünüyorum:

PLAIN TEXT
HTML:
  3.  
  5. Bu metin
  6. önceden biçimlendirilmiş bir metindir.
  7. Hem      boşluklar
  8. hem de satır atlama karakterleri içerir.
  9. </pre>
  10.  
  11. <p>pre etiketi programlama kodları gösterirken yararlıdır:</p>
  12.  
  14. for (int i = 1; i <10; i++) {
  15.      System.out.println(i);
  16. }
  17. </pre>
  18.  
  19. </body>
  20. </html>

İşte sonuç ekran görüntüsü:

Bilgisayar Çıktısı Etiketleri
Bu etiketlerin pek sık kullanıldığını görmedim. Ancak bilginiz olsun diye örneklerini veriyorum. Örnekte code etiketi gösterilememiştir, çünkü wordpress'te kodları bu şekilde görmenizi code etiketi sağlıyor ve iç içe iki code etiketi olmuyor.

PLAIN TEXT
HTML:
  3.  
  4. <kbd>Klavye girdisi</kbd>
  5. <br />
  6. <tt>Uzak yazıcı girdisi</tt>
  7. <br />
  8. <samp>Örnek metin</samp>
  9. <br />
  10. <var>Bilgisayar değişkeni</var>
  11. <br />
  12.  
  14. <b>Not:</b> Bu etiketler genellikle
  15. programlama kodu gösterilirken kulanılır.
  16. </p>
  17.  
  18. </body>
  19. </html>

Ekran görüntüsü:

Adres Etiketi
Adres gösterimi için kullanışlı bir etikete benziyor. Ancak ne yazık ki bu etiketin de ciddi kullanımını bugüne kadar görmedim. :)

Ekran Görüntüsü:

PLAIN TEXT
HTML:
  3.  
  5. Donald Duck<br />
  6. BOX 555<br />
  7. Disneyland<br />
  8. USA
  9. </address>
  10.  
  11. </body>
  12. </html>
  13. [html]
  14.  
  15. <div align="center">
  16. <a class="imagelink" href="http://www.umutdogan.com/wp-content/uploads/2007/12/ders04_04.jpg"><img src="http://www.umutdogan.com/wp-content/uploads/2007/12/ders04_04.thumbnail.jpg" /></a>
  17. </div>
  18.  
  19. <div align="center">
  20. <img src='http://www.umutdogan.com/wp-content/uploads/2007/06/tsmchani.gif'/>
  21. </div>
  22.  
  23. <strong>Kısaltma Gösterimleri</strong>
  24. Bu etiketleri kulllandığınız zaman, kısaltmanın üzerine gelince kısaltmanın anlamını gösterebilmenizi sağlıyor. Örnek üzerinde görelim:
  25.  
  26. [html]
  29.  
  30. <abbr title="Avrupa Birliği">AB</abbr>
  31. <br />
  32. <acronym title="Dünyayı Saran Ağ, World Wide Web">WWW</acronym>
  33.  
  34. <p>Fareyi kısaltmanın üzerinde biraz bekletince title ile belirlediğimiz uzun versiyon görüntülenir.</p>
  35.  
  36. <p>acronym etiketi sadece Internet Explorer'da çalışır.</p>
  37.  
  38. <p>Netscape türevlerindeyse abbr ve acronym etiketleri sorunsuz çalışır.</p>
  39.  
  40. </body>
  41. </html>

Ekran görüntüsü:

Metin Yönlendirme

PLAIN TEXT
HTML:
  3.  
  5. Eğer tarayıcınız çift yönlü aşınımı (bi-directional override, bdo) destekliyorsa, bir sonraki satır sağdan sola doğru(right to left, rtl) yazılacaktır:
  6. </p>
  7.  
  8. <bdo dir="rtl">
  9. İşte tersten yazılmış umutdogan
  10. </bdo>
  11.  
  12. </body>
  13. </html>

Ekran Görüntüsü:

Alıntılama

PLAIN TEXT
HTML:
  3.  
  4. İşte uzun bir alıntı:
  6. "Bilgisayarlar faydasızdır.
  7. Onlar size sadece cevapları verebilir."
  8. Pablo Picasso
  9. </blockquote>
  10.  
  11. İşte kısa bir alıntı:
  13. Alıntımı aldım, verintimi verdim.
  14. </q>
  15.  
  17. block quote etikentinde tarayıcı satır sonu karakterleri ekler ve kenar boşluğu ayarlaması yapar, fakat q etiketi için özel bir işlem yapmaz.
  18. </p>
  19.  
  20. </body>
  21. </html>

Ekran Görüntüsü:

Eklenmiş ve Silinmiş Metinleri Belirtme

PLAIN TEXT
HTML:
  3.  
  5. bir düzine
  6. <del>20</del>
  7. <ins>12</ins>
  8. adettir.
  9. </p>
  10.  
  12. Bir çok tarayıcı silinen metin etiketi için üst çizme, eklenen metin için alt çizgi ekleme işlemi yapar.
  13. </p>
  14.  
  15. </body>
  16. </html>

Ekran Görüntüsü:

Böylece önemli-önemsiz birçok metin biçimlendirme etiketini örnekler üzerinden incelemiş olduk. Şimdi bir kağıt kalem alın ve bu derste hangi etiketleri kullandığımızı alt alta yazın. Daha sonra kendinize bu etiketlerin ne işe yaradığını sorun. En son olarak da bu derste öğrendiğiniz bütün etiketleri kullandığınız bir HTML dosyası oluşturun.

Kullandığımız etiketleri özetleyelim:

Metin Biçimlendirme Etiketleri
Bilgisayar Çıktısı Etiketleri
Alıntı ve Tanımlama Etiketleri

Bir sonraki derste görüşmek üzere. Unutmayın, öğrenmenin ilacı pratik yapmaktır... ;)


Benzer Yazılar

  • Benzer yazı bulunamadı!