HTML Dersleri 3: Metin Biçimlendirme (Text Formatting)

HTML Dersleri 3: Metin Biçimlendirme (Text Formatting)

Merhabalar,

HTML derslerimize kaldığımız yerden devam ediyoruz. Genel olarak bu dersleri HTML dersleri olarak paylaşıyorum ancak anlattıklarım son teknoloji olan, HTML’in en son sürümü olan HTML 5  için anlatılmaktadır. Diğer derslerimde bunu belirtmedim ancak anlatıklarımın eski sürümde de geçerli yeni sürümde de geçerlidir bilginize.

Bu dersimizde ise HTML’de Metin Biçimlendirme yi anlatacağım. İngilizce olarak Text Formatting olarak geçmektedir. Diğer HTML derslerime aşağıda ki bağlantılarla ulaşabilirsiniz.

  1. Temel HTML 5 Etiketleri
  2. HTML 5’de En Sık Kullanılan Meta Etiketler
  3. HTML 5’de En Sık Kullanılan Meta Etiketler #2
  4. HTML Dersleri 1: HTML Nedir ?
  5. HTML Dersleri 2: HTML Etiketleri

Bu derste HTML’de Metin Biçimlendirme, içerik şekillendirme yani text formatting olarak tanımlanan metin üzerinde düzenleme özellikleri hakkında bilgi vermeye çalışıp, basit bir uygulama yapılacaktır.

İlk derste de bahsetmiştim, HTML5 ile bazı elementler artık desteklenmiyor. Bunlar içerisinde konumuzu ilgilendiren elementler/etiketler de mevcut.

Aşağıdaki tabloda bu hususta gösterim yapılmış ve desteklenmeyen özelliğin yerine kullanılan özellikler verilmiştir.

Desteklenmeyen Element/Etiketler Yeni Kullanım Şekli
acronym abbr
applet object
basefont CSS ile düzenlenir.
big CSS ile düzenlenir.
center CSS ile düzenlenir ancak yine işlev görmektedir.
dir ul
font CSS ile düzenlenir.
strike CSS ile düzenlenir.
tt CSS ile düzenlenir.

HTML’de Metin Biçimlendirme Etiketleri

HTML’de Metin Biçimlendirme en çok kullanılan etiketleri aşağıda listedim ve hepsiyle ilgili örnekleri tek tek açıklamak yerine ne için kullandıklarını anlatmaya çalıştım. Yazımızın sonunda da bir adet örnek ile bu etiketlerin kullanımını göstereceğim.

<b>Kalın Yazı </b> <b> Etiketi, kullanıldığı metin yazısını kalınlaştırmak ya da başka değiş ile koyulaştırmak için kullanılır. Kalınlaştırılmak istenilen yazının başın <b> daha sonra yazı ve en etiket </b> şeklinde kapatılarak belirtilen yazı kalınlaştırılır.

<p>Parağraf Yazısı</p> <p> Etiketi, kullanıldığı yerde parağraf yazıları yazmak için kullanılır. Bu etiket içerisinde yazılan yazılar parağraf kurallarına uygun halde düzenlenir ve yorumlanır.

<i>Eğik Yazı</i> <i> Etiketi, kullanıldığı metin yazısını eğik hale getirmek için kullanılır. Yazıyı sağ tarafa doğru hafif eğerek yazının eğik olmasını sağlar. Örnek: bu yazı

<small>Küçük Yazı</small> <small> Etiketi, bu etiket CSS kullanmadan, küçültmek istediğimiz bir metini küçültmek için kullanılır. CSS ‘siz HTML’de yazı küçültme olarakta açıklayabiliriz bu etiketin amacını.

<strong>Güçlü,Koyu Yazı</strong> <strong> Etiketi, bu etiket aynı <b> etiketi gibi işlev görür. Ne amaçla strong olarak ekstra bir etiket çıkarmışlar HTML’in eisteinlerı çözmeye çalışıyor.

<sub>Altbaşlık ya da Altyazı</sub> <sub> Etiketi, Bazen yazdığımız şeyleri kısa ve net bir şekilde anlatmak için kısa yazılara yazarız. Attığımız bir başlığın hemen altına ufak yazı yazmak istiyorsanız HTML’de kullanacağınız etiket <sub> etiketidir.

<sup>Üstbaşlık ya da üstyazı</sup> <sup> Etiketi, bir üstteki etiketten tek farkı alt tarafa değilde kullanıldığı yerin üst kısmına yazı yazmak için kullanılır.

<ins>Altı çizik yazı</ins> <ins> Etiketi,  Facebookta kullandığınız hadi ins, ins canım ya … olarak kullandığınız ins değil bu ins 🙂 Bu ins HTML’de kullanıldığı metinin altını çizmek için kullanılır. Örnek: bu yazının altı çizik.

<del>Üstü çizik yazı</del> <del> Etiketi, Bu etiket kullanıldığı yerde ki metnin üstünü çizmek için kullanılır. Örnek: bu yazının üstü çizik.

<code>CSS,HTML kodlarını göstermek için kullanılır.</code> <code> Etiketi, bu etiket benim sizlere CSS,HTML’de kullanacağınız kodları göstermek için kullandığım etikettir. Yani, HTML sayfanızda bir HTML kodunu sadece göstermek istiyor ancak işlev görmesini istemiyorsanız kullanacağınız metin etiketi <code> ‘dir. Örnek kullanımı: .a {color:red;}  Bu bir css kodu.

<pre>Biçimlendirilmiş Metin</pre> <pre> Etiketi, bu etiket kullanıldığı metnin biçimlendirilmiş bir metin olduğunu belirtmek için kullanılır.

<em>Biçimlendirilmiş Metin</em> <em>  Etiketi, bir üstte anlattığım <i> etiketiyle aynı görevi görmektedir. Neden ekstra bir etiket çıkarmışlar yine anlamadım aynı işi yapıyorsa değil mi ?

Daha çok fazla bu tarz metin biçimlendirme etiketleri mevcuttur. Yazı çok fazla uzun olmaması için sadece en sık kullanılan etiketleri ekleyerek bilgi vermeye çalıştım. Daha fazlasını öğrenmek istiyorsanız google’de araştırma yaparak detayını öğrenebilirsiniz.

Bir önceki yazım olan HTML Dersleri 2: HTML Etiketleri başlıklı yazımda HTML 5 Temel Etiketler ve HTML Etiketleri hakkında bilgiler verilmektedir.