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.
1 2 3 4 5 6 7 8 | <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ı:
1 2 3 4 | <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> |
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.
1 2 3 | 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.
1 2 3 | Web Tasarım ve Programlama Dersi <i>HTML</i> Dersleri |
Ekran Çıktısı:
Web Tasarım ve Programlama Dersi HTML Dersleri
Üst Simge <sup> Etiketi:
<sup>…..</sup> 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.
1 2 3 | 2<sup>4</sup> = 2 x 2 x 2 x 2 |
Ekran Çıktısı:
24 = 2 x 2 x 2 x 2
Alt Simge <sub> Etiketi :
<sub>…</sub> etiketi kullanılarak alt simge eklemeyi aşağıdaki HTML kodlarını kullanarak oluşturalım.
1 2 3 | Bitkiler gündüz CO<sub>2</sub> alır, O<sub>2</sub> verirler. Gece ise O<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
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 etiketini kullanmak gerekecektir. Örnek kullanım ve ekran çıktısını inceleyelim.
1 2 3 | 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.
1 2 3 | Web Tasarım ve<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.
1 2 3 | Web Tasarım ve 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.
1 2 3 | <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> |
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.
1 2 3 4 | <p>Tablet:</p> <p><del>750 TL</del> 599TL</p> |
Ekran Çıktısı:
Tablet:
750 TL 599TL
Blockquote kodunu kullandığım zaman bu sitede ki gibi başına tırnak işareti koymuyor.
Nasıl tırnak işareti gelmesini sağlayabilirim.
Blockquote etiketine CSS ile yeniden stil düzenlemesi yaparak ekleyebilirsin.