HTML DERSLERİ Web Tasarım

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.

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ı:

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.


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.

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.

 


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.

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.

 

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.

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.

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.

 

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.


Ekran Çıktısı:

Tablet:

750 TL 599TL

 

2 Yorum

  • 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.

Yorum yap

Web Tasarım & Programlama sitesinden daha fazla şey keşfedin

Okumaya devam etmek ve tüm arşive erişim kazanmak için hemen abone olun.

Okumaya devam et