HTML Biçimlendirme Ve Metin Düzenleme Etiketleri

Bu yazımızda HTML ile metin düzenleme etiketlerinin kullanımını göreceğiz. Metin düzenlemede kullanılan H1, H2, H3, H4, H5, H6, p, b, i, sup, sub,  nbsp, br, hr, strong, em, blockquote, s etiketlerinin ne işe yaradığını ve örnek kullanımını yazının devamında bulabilirsiniz.

Başlık Etiketi <HX> 

Bu etiket hazırlamış olduğunuz dokümana başlık eklemek için kullanılmaktadır. h1, h2, h3, h4, h5 ve h6 etiketi olarak kullanılmaktadır. <h1>…</h1> en büyük başlığı <h6>…</h6> ise enküçük başlığı ifade etmektedir. Aşağıdaki örneği ve ekran çıktısını inceleyerek aralarındaki farkı görebilirsiniz.

<h1>www.yazilimkodlama.com</h1> <h2>www.yazilimkodlama.com</h2> <h3>www.yazilimkodlama.com</h3> <h4>www.yazilimkodlama.com</h4> <h5>www.yazilimkodlama.com</h5> <h6>www.yazilimkodlama.com</h6>

12345678

<h1>www.yazilimkodlama.com</h1><h2>www.yazilimkodlama.com</h2><h3>www.yazilimkodlama.com</h3><h4>www.yazilimkodlama.com</h4><h5>www.yazilimkodlama.com</h5><h6>www.yazilimkodlama.com</h6>

Yukarıdaki HTML kodları sonucunda tarayıcımızda aşağıdaki görüntü oluşacaktır.

www.yazilimkodlama.com

www.yazilimkodlama.com

www.yazilimkodlama.com

www.yazilimkodlama.com

www.yazilimkodlama.com

www.yazilimkodlama.com

Paragraf (<p>) Etiketi

<p> etiketi paragraf oluşturmak için kullanılmaktadır. Bu etiket arasına yazılan yazılardan sonra metnin altına bir satır boş bırakılarak devam edilmesi sağlanmaktadır. <p> etiketi kullanımı ile ilgili aşağıdaki örneği ve ekran çıktısını inceleyebilirsiniz.

HTML Kodları:

<p>Video, size görüşünüzü kanıtlamak için güçlü bir yol sunar. </p> <p>Word, belgenizin profesyonelce üretilmiş görünmesini sağlamak için...</p>

1234	<p>Video,sizegörüşünüzükanıtlamakiçingüçlübir yol sunar.</p><p>Word,belgenizin profesyonelceüretilmişgörünmesini sağlamakiçin...</p>

Ekran Çıktısı:

Video, size görüşünüzü kanıtlamak için güçlü bir yol sunar.

Word, belgenizin profesyonelce üretilmiş görünmesini sağlamak için…

Kalınlaştırma <b> Etiketi:

Bu etiket ile istenen metnin bold (kalın) olarak yazılması sağlanır. Aşağıdaki HTML kodunu incelediğimizde b etiketinin kullanımını görüyoruz.

Bu etiket ile istenen metnin <b>bold (kalın)</b> olarak yazılması sağlanır.

123	Bu etiket ile istenen metnin<b>bold(kalın)</b>olarak yazılmasısağlanır.

Ekran Çıktısı: Bu etiket ile istenen metnin bold (kalın) olarak yazılması sağlanır.

Eğik Yazı (İtalik) <i> Etiketi:

Bu etiket kullanılarak italik yazı özelliği vermek istediğimiz yazıları hazırlayabiliriz. Aşağıda örnek HTML kodları ve ekran çıktısını görebilirsiniz.

Web Tasarım ve Programlama Dersi <i>HTML</i> Dersleri

123	Web Tasarımve Programlama Dersi<i>HTML</i>Dersleri

Ekran Çıktısı:

Web Tasarım ve Programlama Dersi HTML Dersleri

Üst Simge <sup> Etiketi:

^….. bu etiketi kullanarak üst simge eklemesi yapılımaktadır. <sup> etiketi kullanımı ile ilgili örnek HTML kodları ve ekran çıktısını inceleyelim.

2⁴ = 2 x 2 x 2 x 2

123	2<sup>4</sup>=2x2x2x2

Ekran Çıktısı:

24 = 2 x 2 x 2 x 2

Alt Simge <sub> Etiketi :

_… etiketi kullanılarak  alt simge eklemeyi aşağıdaki HTML kodlarını kullanarak  oluşturalım.

Bitkiler gündüz CO₂ alır, O₂ verirler. Gece ise O₂ alır, CO₂ verirler.

123	BitkilergündüzCO<sub>2</sub>alır,O<sub>2</sub>verirler.Gece iseO<sub>2</sub>alır,CO<sub>2</sub>verirler.

Ekran Çıktısı:

Bitkiler gündüz CO2 alır, O2 verirler. Gece ise O2 alır, CO2 verirler.

Boşluk Etiketi  &nbsp;

Bir Html belgesinde klavyede boşluk çubuğuna üst üste basarak birden fazla boşluk vermek istediğinizde bunun olmayacağını görürsünüz. Bu şekilde birden fazla boşluk eklemek için  &nbsp; etiketini kullanmak gerekecektir. Örnek kullanım ve ekran çıktısını inceleyelim.

www. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;ahmetcansever &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;.com

123	www.      ahmetcansever     .com

Ekran Çıktısı:

www.            ahmetcansever          .com

Alt Satıra Geçme <br> Etiketi:

<br> etiketi bulunulan satırdan bir alt satıra geçmek için kullanılır. Kullanımına örnek HTML kodları ve ekran çıktısını inceleyelim.

Web Tasarım ve<br>Programlama

123	Web Tasarımve<br>Programlama

Ekran Çıktısı:

Web Tasarım ve Programlama

Güçlü <strong> Etiketi:

<strong> etiketi yazıya <b> etiketi ile aynı görünümü verir. Yani yazının kalın görünmesini sağlar. Ayrıldıkları nokta şudur: <b> takısı sadece yazının stilini değiştirir. <strong> takısı ise, yazının stilini değiştirmekle kalmayıp, ona önem katar. Arama motorları sayfayı indekslerken <strong> takıları arasındaki kelimelerin, diğer kelimeler ile karşılaştırıldığında daha önemli olduğunu varsaymaktadır.  Aynı şekilde, sayfayı bir okuma yazılımına okutursanız, <strong> takıları arasındaki kelimeleri daha yüksek sesle okuyacaktır.

Web Tasarım ve Programlama Dersi <strong>HTML</strong> Örnekleri

123	Web Tasarımve Programlama Dersi<strong>HTML</strong>Örnekleri

Ekran Çıktısı:

Web Tasarım ve Programlama Dersi HTML Örnekleri

Alıntı (Blockquote) Etiketi:

Blockquote , başka bir kaynaktan alıntılanan içeriği, isteğe bağlı olarak bir footer veya cite öğesi içinde olması gereken bir atıf ile ve isteğe bağlı olarak ek açıklamalar ve kısaltmalar gibi satır içi değişikliklerle temsil eder. Kullanımıyla ilgili örnek HTML kodlarını ve ekran çıktısını inceleyebilirsiniz.

<p><blockquote>Video, size görüşünüzü kanıtlamak için güçlü bir yol sunar.  </blockquote>Çevrimiçi Video'ya tıkladığınızda, eklemek istediğiniz videoya ait ekleme kodunu yapıştırabilirsiniz. </p>

123	<p><blockquote>Video,sizegörüşünüzükanıtlamakiçingüçlübir yol sunar. </blockquote>ÇevrimiçiVideo'yatıkladığınızda,eklemek istediğiniz videoya ait ekleme kodunu yapıştırabilirsiniz.</p>

Ekran Çıktısı:

Video, size görüşünüzü kanıtlamak için güçlü bir yol sunar.

Çevrimiçi Video’ya tıkladığınızda, eklemek istediğiniz videoya ait ekleme kodunu yapıştırabilirsiniz.

Yazı Üstünü Çizme <del> Etiketi:

<s>..</s> etiketi kullanarak artık geçersiz olan metinler vurgulanabilir.

<p>Tablet:</p> <p><del>750 TL</del> 599TL</p>

1234	<p>Tablet:</p><p><del>750TL</del>599TL</p>

Ekran Çıktısı:

Tablet:

750 TL 599TL

Bunu paylaş:

• Twitter üzerinde paylaşmak için tıklayın (Yeni pencerede açılır)
• Facebook'ta paylaşmak için tıklayın (Yeni pencerede açılır)