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

Blog Gönderisi Resmi

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.

Kalın bir yazı.
Eğik bir yazı.
Bu sub ve sup

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:

Bu yazı hem kalın hem de anlamlı olarak vurgulanacak.
Bu yazı kalın görüntülenecek.

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:

Bu yazı italik görüntülenecek.
Bu yazı da italik görüntülenecek ama anlamsal olarak vurgulanmayacak.

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:

Bu yazı normal boyutta görüntülenecek.
Bu yazı daha küçük boyutta görüntülenecek.

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:

Bu bir işaretlenmiş metindir.

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:

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

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:

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

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, H2O 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:

H2O O formülünde, suyun kimyasal yapısındaki hidrojen (H) atomlarının sayısı iki katıdır.

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:

23=8 Formülünde, 2 sayısının 3. kuvveti olan 8 ifadesi yer almaktadır.

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.

Sizin İçin Önerdiklerimiz

Blog Resim
HTML'de CSS Nasıl Kullanılır? Örnekleriyle (Ders-8)

HTML

Günümüzde web siteleri, birçok kişi için önemli bir gelir kaynağı olmaktadır. Web siteleri, kullanıcıların ihtiyaçlarına göre tasarlanır ve bu tasarımın..

Devamını Oku
Blog Resim
HTML Input Type Nedir? Örnekleri Nelerdir?

HTML

Günümüzde web tasarımı, işletmelerin bir online varlık oluşturması için çok önemli hale geldi. Web siteleri, işletmelerin ürünlerini ve hizmetlerini müşterilere..

Devamını Oku
Blog Resim
Web Sitelesine Sosyal İkonlar Ekleme Kodu

HTML

Sosyal medya, modern çevrimiçi varlığın ayrılmaz bir parçasıdır ve web sitelerine sosyal medya ikonları eklemek, ziyaretçilerin markanızla sosyal platformlarda etkileşime girmesini teşvik eder.

Devamını Oku
Blog Resim
HTML Yazı Elementleri ve Kullanım Örnekleri (Ders-5)

HTML

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

Devamını Oku