Vurgu ve ayrım

Önemli bölümleri vurgular ve yatay çizgiyle ayırırsın.

Vurgu ve ayrım: mark, hr, br

Tanıtım metni hazır. Şimdi önemli sözcükleri işaretleyip bölümleri ayıracaksın. Üç etiket işine yarayacak.

 bir sözcüğü ışıklı olarak işaretler; ziyaretçinin gözü hemen oraya gider. <hr> konu değişimini işaretleyen yatay bir çizgi çizer.   ise aynı paragraf içinde satır kırma yapar; adres ya da şiir gibi durumlarda işe yarar.

mark ve br: işaretleme ve satır kırma

 ve   farklı amaçlara hizmet eder.  bir sözcüğü ya da ifadeyi işaretler; tarayıcı arka planı sarı yapar. Önemli noktayı vurgulamak için idealdir.

  ise satır kırma yapar; bir paragraf içinde yeni satıra geçmek için kullanılır. Boş etikettir, yani kapanış etiketi yoktur. Adres ya da şiir yazarken işine yarar.

Uygulama hr, mark ve br ile vurgu ve ayrım ekle

Önceki dersin tanıtım metni içeren body'sini al. İkinci paragraftan sonra bir <hr> ekle. Hr'den sonra bir  ekle ve içinde bir sözcüğü mark ile işaretle (örnek açık kaynak). Son olarak bir  daha ekle ve içinde br ile satır kır (örnek hobiler).

Örnek çözümü göster

<!DOCTYPE html>
<html lang="tr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Ayşe Yılmaz - Hakkımda</title>
  </head>
  <body>
    <h1>Ayşe Yılmaz</h1>
    <h2>Yazılım geliştirici</h2>
    <p>Merhaba! Ben Ayşe. <strong>Web tabanlı uygulamalar</strong> geliştiriyorum ve açık kaynağa <em>katkıda</em> bulunmayı severim.</p>
    <p>Bu sayfada kendimi kısaca tanıtıyorum.</p>
    <hr>
    <p>En sevdiğim alan <mark>açık kaynak</mark>.</p>
    <p>Hobilerim:<br>kitap okumak ve doğa yürüyüşü.</p>
  </body>
</html>

Kendini test et

Bu projede <hr> etiketi nereye en uygun konur?
- Sayfanın en üstüne, h1'den önce
- Her paragraftan sonra
- Title etiketinin içine
- Tanıtım paragrafları ile vurgular arasında
Cevabı göster

Tanıtım paragrafları ile vurgular arasında — Doğru. hr konu değişimini işaretler; tanıtımdan vurgulara geçiş buna uyar.

Bölüm ayrımı için etiketi tamamla

<p>Birinci bölüm</p>
<____>
<p>İkinci bölüm</p>

Cevabı göster

<p>Birinci bölüm</p>
<hr>
<p>İkinci bölüm</p>

Etiketleri anlamlarıyla eşleştir

mark

İşaretli sözcük
hr

Konu ayrımı
br

Satır kırma
strong

Önemli metin
em

Vurgulu metin

Sıradaki ders: Proje sonu - Hakkımda

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler