Metin Biçimlendirme

Ders 9/45 · 5 dakika · 2 soru · 1 egzersiz

Bu dersin sonunda metnin önemli bölümlerini anlamına uygun etiketlerle işaretleyebileceksiniz.

Anlam ve görünüm

HTML’de iki tür biçimlendirme etiketi vardır. Bazıları metnin anlamını söyler, bazıları yalnızca farklı göründüğünü belirtir.

strong Bu metin önemli. Tarayıcılar kalın gösterir.
em Bu metin vurgulu okunmalı. Tarayıcılar italik gösterir.
b Kalın yazı, ek bir önem taşımaz.
i İtalik yazı, ek bir vurgu taşımaz. Yabancı bir kelime veya kitap kahramanının düşünceleri için kullanılabilir.

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Biçimlendirme</title>
</head>
<body>
  <p><strong>Dikkat:</strong> Sınav yarın saat 9'da.</p>
  <p>Sınava <em>kesinlikle</em> kalemle gelin.</p>
  <p>Bir sonraki konumuz <i>Hello World</i> geleneği.</p>
  <p><strong><em>Hem önemli hem de vurgulu.</em></strong></p>
</body>
</html>

Çoğu durumda strong ve em kullanın. Ekran okuyucular ve arama motorları bu etiketlerin anlamından yararlanabilir.

Diğer etiketler

mark Metni fosforlu kalemle işaretlenmiş gibi gösterir.
small Dipnot veya telif yazısı gibi küçük açıklamalar içindir.
del Silinmiş metni gösterir, üstü çizili görünür.
ins Sonradan eklenmiş metni gösterir, altı çizili görünür.
sub Alt simge: H₂O
sup Üst simge: 2³

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Diğer etiketler</title>
</head>
<body>
  <p>Bu dersin <mark>en önemli</mark> kelimesi işaretlendi.</p>
  <p>Fiyat: <del>100 TL</del> <ins>80 TL</ins></p>
  <p>Suyun formülü H<sub>2</sub>O şeklinde yazılır.</p>
  <p>2<sup>3</sup> işleminin sonucu 8'dir.</p>
  <p><small>Tüm hakları saklıdır.</small></p>
</body>
</html>

u etiketi

u etiketi metnin altını çizer. Web’de altı çizili yazılar bağlantı sanılabildiği için önem belirtmek amacıyla kullanmayın. Vurgu için strong veya em tercih edin.

Sık yapılan hatalar

Kapanış sırası. <strong><em>metin</strong></em> yanlıştır. En son açılan em en önce kapanmalıdır.

Her yeri strong yapmak. Her şey önemliyse hiçbir şey önemli değildir. Yalnızca gerçekten önemli kısımları işaretleyin.

Soru 1

Bir uyarı metninde önemli bir bilgiyi işaretlemek istiyorsunuz. Hangisi en uygun etikettir?

b :: b yalnızca görünümü değiştirir, önem bildirmez.
strong :: Doğru.
small :: small küçük açıklamalar içindir.

Soru 2

Kimyasal formüldeki küçük “2” için hangi etiket kullanılır?

sup :: sup üst simge içindir.
small :: Bu, sayıyı satırın altına indirmez.
sub :: Doğru.

İndirim duyurusu

Hedefteki sonucu elde edin. Yalnızca body içine yazılacak kodu yazın. İlk paragrafta Dikkat: kelimesi önemli olarak işaretlensin. İkinci paragrafta eski fiyat silinmiş, yeni fiyat eklenmiş olarak yazılsın.

<p><strong>Dikkat:</strong> İndirim bugün bitiyor.</p>
<p>Fiyat: <del>200 TL</del> <ins>150 TL</ins></p>

Bu derste öğrendikleriniz

strong ve em anlam taşır, b ve i ek bir önem bildirmez.
mark, small, del, ins, sub ve sup özel durumlar içindir.
Metin biçimi seçilirken önce anlam düşünülür.

Dersi bitirdin mi?Bu dersi tamamladın.

İlerlemen bu tarayıcıda saklanır.