HTML Yazı Elementleri ve Kullanım Örnekleri (Ders-5)

Hizmetlerimiz hakkında bilgi almak için tıklayın.

Merhabalar!

5. Bölüme Hoşgeldiniz, bu bölümde HTML yazılarının elementleri ve kullanım örneklerini göstereceğiz.

HTML (Hyper Text Markup Language), web sayfalarının yapısını ve içeriğini düzenleyen dil olarak kullanılır. Bir web sayfasını oluşturmak için kullanılacak HTML elementleri ise birçok farklı özelliğe sahiptir. Bunlar arasında yazı elementleri de bulunmaktadır. Bu yazıda, HTML yazı elementleri ve kodlama örnekleri hakkında detaylı bilgi verilecektir.

strong ve b İçeriği

<b> ve <strong> elementleri, yazının bold (kalın) olarak görüntülenmesini sağlar. Ancak <strong> elementi, yazının sadece vizüel olarak değil aynı zamanda anlamsal olarak da vurgulanmasını sağlar.

<strong>: metni büyük önemle tanımlar. İçerideki içerik genellikle kalın olarak görüntülenir.

<b>:kalın metni herhangi bir ekstra önem olmaksızın tanımlar.

Örnek:

 <strong>Bu yazı hem kalın hem de anlamlı olarak vurgulanacak.</strong>
 <b>Bu yazı kalın görüntülenecek.</b>
 

Görünüm:

i ve em İçeriği

<em> ve <i> elementleri, yazının italik (eğik) olarak görüntülenmesini sağlar.

Ancak <em> elementi, yazının sadece vizüel olarak değil aynı zamanda anlamsal olarak da vurgulanmasını sağlar.

<em>: vurgulanan metni tanımlar. İçerideki içerik tipik olarak italik olarak görüntülenir.

İpucu: Bir ekran okuyucu, sözlü vurguyu kullanarak <em> içindeki sözcükleri vurgulayarak telaffuz edecektir.

<i>: metnin bir bölümünü alternatif bir ses veya ruh halinde tanımlar. İçerideki içerik tipik olarak italik olarak görüntülenir.

İpucu: <i> etiketi genellikle teknik bir terimi, başka bir dilden bir cümleyi, bir düşünceyi, bir gemi adını vb. belirtmek için kullanılır.

Örnek:

<em>Bu yazı italik görüntülenecek.</em>
<i>Bu yazı da italik görüntülenecek ama anlamsal olarak vurgulanmayacak.</i>

Görünüm:

small İçeriği

<small> yazının daha küçük bir boyutta görüntülenmesini sağlar.

Örnek:

Bu yazı normal boyutta görüntülenecek. 
<small>Bu yazı daha küçük boyutta görüntülenecek.</small>

Görünüm:

mark İçeriği

<mark> öğesi, yazının sarı renkli bir arka plan üzerinde görüntülenmesini sağlar. Bu sayede yazı, önemli bir bilgi olarak vurgulanmış olur.

Örnek:

<p>Bu bir <mark>işaretlenmiş</mark> metindir.</p>

Görünüm:

del İçeriği

<del> öğesi, yazının üstü çizili olarak görüntülenmesini sağlar. Bu sayede yazı, yanlış veya geçersiz bir bilgi olduğu vurgulanmış olur.

Örnek:

<p><del>Bu yazı yanlış veya geçersiz bir bilgi olduğu için üstü çizili olarak görüntülenecek.</del></p>

Görünüm:

ins İçeriği

<ins> öğesi, yazının altı çizili olarak görüntülenmesini sağlar. Bu sayede yazı, yeni veya eklenen bir bilgi olduğu vurgulanmış olur.

Örnek:

<p><ins>Bu yazı yeni veya eklenen bir bilgi olduğu için altı çizili olarak görüntülenecek.</ins></p>

Görünüm:

sub İçeriği

<sub> öğesi, alt simge metnini tanımlar. Alt simge metni, normal satırın yarım karakter altında görünür ve bazen daha küçük bir yazı tipiyle işlenir. Alt simge metni, H₂O gibi kimyasal formüller için kullanılabilir:

Örnek:

 <p>H<sub>2</sub>O O formülünde, suyun kimyasal yapısındaki hidrojen (H) atomlarının sayısı iki katıdır.</p>
 

Görünüm:

sup İçeriği

<sup> öğesi, üst simge metnini tanımlar. Üst simge metni, normal satırın yarım karakter üzerinde görünür ve bazen daha küçük bir yazı tipiyle işlenir. Üst simge metni, WWW^[1] gibi dipnotlar için kullanılabilir:

Örnek:

<p>2<sup>3</sup>=8 Formülünde, 2 sayısının 3. kuvveti olan 8 ifadesi yer almaktadır.</p>

Görünüm:

Yukarıdaki örneklerde de görüldüğü gibi, HTML yazı elementleri farklı amaçlara hizmet etmektedir. Bu elementlerin kullanımı, hem web sayfasının tasarımına hem de anlamlı bir yapıya sahip olmasına yardımcı olur.

5. Derste Neler Öğrendik?

1. <b>:Kalın metni tanımlar.
2. <strong>:Önemli kalın metni tanımlar.
3. <i>:Eğik metni tanımlar.
4. <em>:Vurgulanan eğik metni tanımlar.
5. <small>:Küçültülen metni tanımlar.
6. <mark>:İşaretlenmiş ve vurgulanmış metni tanımlar.
7. <del>:Üstü çizilmiş metni tanımlar.
8. <ins>:Altı çizilmiş metni tanımlar.
9. <sub>:Alt simgeli metni tanımlar.
10. <sup>:Üst simgeli metni tanımlar.